jquery - ホバー後にjqueryアニメーションを停止する

Question

アニメーションを完全に壊さずにキューイングから停止するにはどうすればよいですか...以下のように .stop() を使用してみましたが、アニメーションが本当に奇妙な時間に停止し、再び開始されないようです。

$('.work_tile').hover(function() {
    $(this).stop().find('.white_bkd').stop().fadeIn('fast');
    $(this).stop().children('div.arrow').stop().animate({
        "left": "+=305px"
    }, "fast");
    $(this).stop().children('div.tile_header').stop().animate({
        "right": "+=200px"
    }, "fast");
}, function() {
    $(this).stop().find('.white_bkd').stop().fadeOut('fast');
    $(this).stop().children('div.arrow').stop().animate({
        "left": "-=305px"
    }, "fast");
    $(this).stop().children('div.tile_header').stop().animate({
        "right": "-=200px"
    }, "fast");

})​

Answer 1

以下のコードを試してください。それがうまくいくことを願っています。

$('.work_tile').hover(  
     function() {
     $(this).stop(true,false).find('.white_bkd').stop(true,true).fadeIn('fast');
     $(this).stop(true,false).children('div.arrow').stop(true,true).animate({"left": "+=305px"}, "fast");
     $(this).stop(true,false).children('div.tile_header').stop(true,true).animate({"right": "+=200px"}, "fast");

     },

     function() {$(this).stop(true,false).find('.white_bkd').stop(true,true).fadeOut('fast');     
     $(this).stop(true,false).children('div.arrow').stop(true,true).animate({"left": "-=305px"}, "fast");
     $(this).stop(true,false).children('div.tile_header').stop(true,true).animate({"right": "-=200px"}, "fast");

     })