jQuery 到 Prototype 转换：鼠标悬停时动态 SlideUp div

Question

我使用这个 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>

“masque”div (CSS : height: 0;display:none;position:absolute;)在“thumb”内部向上滑动包装 div（CSS：位置：相对；）。

我在同一页面中有很多“拇指”div，这就是为什么我需要动态完成它，因此只有特定“拇指”内的“面具”div向上滑动（当鼠标未结束时向下滑动） 。

对于这个特定项目，我已经从 jQuery 迁移到 Prototype/Scriptaculous（不要问为什么 :-D ），我需要将此代码转换为 Prototype/Scriptaculous..

有人可以帮我吗？

注意：它不需要与 jQuery 代码完全相同，我只需要相同的行为风格。

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

我仍然不确定它是否真的正确或优雅！