0

この 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: 位置: 相対;) 内で上にスライドします。

同じページに多くの「親指」div があるため、動的に実行する必要があるため、その特定の「親指」内の「仮面」div のみが上にスライドされます (マウスが上にないときは下にスライドされます)。 .

この特定のプロジェクトのために jQuery から Prototype/Scriptaculous に移行しました (理由は聞かないでください :-D )。このコードを Prototype/Scriptaculous に変換する必要があります。

誰かが私を助けてくれますか？

注: jQuery コードとまったく同じである必要はありません。同じ動作スタイルが必要なだけです。

4

1 に答える 1

1

主な問題は、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();

それが実際に正しいのかエレガントなのかはまだわかりません!

于 2009-05-26T10:26:13.640 に答える