Преобразование jQuery в прототип: динамически слайд-ап div при наведении курсора мыши

Я использую этот код jQuery для динамического скольжения div над его div-оболочкой:

jQuery.fn.masque = function(classSelector) {
    $(this).hover(function(){
        $(this).find(classSelector).stop().animate({height:'88px',opacity: '0.8'},400);
    },function () {
        $(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300);
    });
};

$(document).ready(function(){$('.thumb').masque('.masque');});

HTML такой:

<div class="thumb">
  <a href="something.html"><img src="something.jpg" /></a>
  <div class="masque">
    <h3>Something</h3>
    <p> Something e</p>
  </div>
</div>

Div «маска» (CSS: высота: 0; отображение: нет; позиция: абсолютная;) скользит вверх внутри div-оболочки «большого пальца» (CSS: позиция: относительная;).

У меня есть много разделов "большой палец" на одной странице, поэтому мне нужно, чтобы это было сделано динамически, чтобы только "маскирующий" элемент внутри этого конкретного "большого пальца" скользил вверх (и скользил вниз, когда мышь не над) .

Я перешел с jQuery на Prototype/Scriptaculous для этого конкретного проекта (не спрашивайте, почему :-D), и мне нужно преобразовать этот код в Prototype/Scriptaculous..

Может кто-нибудь, пожалуйста, помогите мне?

Примечание. Он не обязательно должен быть точно таким же, как код jQuery. Мне просто нужен такой же стиль поведения.


javascript jquery prototypejs scriptaculous
person Jonathan    schedule 26.05.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Основная проблема в том, что в scriptaculous нет функции stop(): вам нужно где-то удерживать эффект.

Может быть, это было бы

Element.addMethods({
    masque: function(selector) {
        this.observe('mouseover', function() {
            if(this._masqueEffect !== undefined) {
                this._masqueEffect.cancel();
            }
            this._masqueEffect = this.down(selector).morph({
                    style: {height:'88px',opacity: '0.8'},
                    duration: 400});
        });
        this.observe('mouseout', function() {
            if(this._masqueEffect !== undefined) {
                this._masqueEffect.cancel();
            }
            this._masqueEffect = this.down(selector).morph({
                    style: {height:'0px',opacity: '0'},
                    duration: 300});
        });
    }
});

(function(){ $$('.thumb').invoke('masque', '.masque'); }).defer();

Я до сих пор не уверен, правильно ли это или элегантно!

person alamar    schedule 26.05.2009
comment
Привет, я вставил ваш код между тегами ‹script type='text/javascript'›‹/script› на своей странице, но он не работает.... есть предложения??? Спасибо! - person Jonathan; 26.05.2009
comment
Я проверил с помощью Firebug и получил 1 ошибку: this.observe не является функцией (in this.observe('mouseover', function() {... - person Jonathan; 26.05.2009
comment
попробуйте заменить this.observe('foo', function() {}); с this.onfoo = function() {}; но я не уверен, почему. - person alamar; 26.05.2009