Преобразование jQuery в Prototype: динамическое скольжение div при наведении курсора мыши - PullRequest
Новая
       10

Преобразование jQuery в Prototype: динамическое скольжение div при наведении курсора мыши

0 голосов
/ 26 мая 2009

Я использую этот код 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 "masque" (CSS: высота: 0; отображение: нет; позиция: абсолютная;) перемещается вверх внутри div-оболочки "thumb" (CSS: позиция: относительная;).

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

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

Может кто-нибудь помочь мне?

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

1 Ответ

1 голос
/ 26 мая 2009

Основная проблема в том, что 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();

Я все еще не уверен, действительно ли это правильно или изящно!

...