javascript - JQuery アニメーションでの setTimeout

Question

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

Answer 1

これは範囲外です。

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

Answer 2

使用するdelay()

たとえば

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

Answer 3

問題は element に依存していると思い$(this)ます. setTimeout 要素の関数の中にいるとき、thisそれは同じではありません. 要素を var に保存してから関数を実行しようとしない理由

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