JQuery 动画中的 setTimeout答案

【问题标题】：setTimeout in a JQuery animationJQuery 动画中的 setTimeout
【发布时间】：2012-05-31 19:33:11
【问题描述】：

我遇到了 setTimeout() 的问题。我希望在鼠标悬停状态下，子菜单在间隔（500 毫秒）后向上滑动。但是 setTimeout() 不起作用。

喜欢这个链接：http://jsfiddle.net/felipepalazzo/Xyhvn/2/

代码：

(function($){
    $.fn.showMenu = function(options){

        var settings = $.extend({
            height  : '40px',
            speed   : '500',
            heightx : '20px'              
        }, options || {});

        return this.each(function(){
           var elem = $(this);
           var menu_timer;
            elem.hover(function(){
                $(this).stop().animate({'height' : settings.height}, settings.speed);
                    }, function(){
                      //setTimeout(function(){  
                      $(this).stop().animate({'height' : settings.heightx}, settings.speed);
                            //},500);
                    }); 
        });      
    };
})(jQuery);

【问题讨论】：

标签： javascript jquery timer jquery-animate settimeout

【解决方案1】：

这超出了范围。

var that = this;
setTimeout(function(){
    $(that).stop().animate({'height' : settings.heightx}, settings.speed);
},500);

【讨论】：

正是我的想法 +1.. 但不是超出范围，我会说 this 内 setTimeout 是 window 对象而不是菜单。 >>jsfiddle.net/Xyhvn/3

【解决方案2】：

使用delay()

例如

$(this).delay(500).stop().animate({'height' : settings.heightx}, settings.speed);

【讨论】：

【解决方案3】：

我认为问题取决于元素$(this)，当您在setTimeout 的函数内部时，元素this 就不一样了。为什么不尝试将元素保存在 var 中然后执行函数

var foo = this;
setTimeout(function(){
    $(foo).stop().animate({'height' : settings.heightx}, settings.speed);
},500);

【讨论】：