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

我使用此jQuery代码在其wrapper 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”wrapper div（CSS:position:relative；）内向上滑动

我在同一个页面中有很多“拇指”div，这就是为什么我需要动态地完成它，所以只有特定“拇指”中的“面具”div向上滑动（当鼠标不在上方时向下滑动）

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

有人能帮我吗

---

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

主要问题是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();

---

我仍然不确定它到底是正确的还是优雅的

您好，我已经在我的页面的标签之间插入了您的代码，但它不起作用。。。。有什么建议吗？？？谢谢我用Firebug检查了一下，得到了一个错误：this.observe不是一个函数（在“this.observe（'mouseover'，function（）{…”中），尝试替换this.observe（'foo'，function（）{}）；使用this.onfoo=function（）{}；但我不确定为什么。