マウスオーバーで動的にSlideUpのDIV：jQueryのは、変換をプロトタイプに

Question

私は動的にwraper divの上のdivを上にスライドするために、このjQueryのコードを使用します：

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;表示：なし;位置：絶対;） "親指" wraperのDIV（CSS：位置：相対;）の内部まで摺動する。

私はそれがマウスである場合、その特定の「親指」の内部だけで「仮面」のdivがアップ摺動（ダウン滑らせるように動的に行われる必要がある理由

私は同じページで「親指」のdivの多くを持って、thatsのではない）を介しています。

私は、この特定のプロジェクト（なぜ:-D聞いていない）のためのプロトタイプ/ ScriptaculousのにjQueryのから移動してきたと私はプロトタイプ/ Scriptaculousのにこのコードを変換する必要があります..

誰かが私を助けてくださいことはできますか？

注：これは、私はちょうど同じ行動様式を必要とjQueryのコードと正確に一致する必要はありませんの

。

Answer 1

主な問題は、Scriptaculousの停止を（）を持っていないということです。あなたがどこかに効果を保持する必要があります。

多分それは次のようになります。

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();

私はまだそれが実際に正しいかエレガントだかはわからない！