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”wraper div中滑动（CSS：position：relative;）。

我在同一页面上有很多“拇指”div，这就是为什么我需要它动态完成，所以只有特定“拇指”内的“masque”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();

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

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

1 个答案: