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 回答