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

     })