动画中的stop()和delay()的JQuery问题

Question

正如您在http://jsfiddle.net/FrelCee/5zcv3/4/上看到的那样,我希望在容器悬停时为这3个div设置动画.

问题是当您快速悬停多次时出现的这个丑陋的队列.我也试过使用.stop()函数,但是然后delay()不起作用.

以下是stop()函数和delay()问题的示例:http: //jsfiddle.net/FrelCee/FHC99/22/

有谁知道更好的方法吗？

提前致谢!

Answer 1

您只需要提供至少第一个参数来.stop(true, true)清除当前队列,您可以决定是否还要提供第二个参数以在下一个参数启动时跳转到动画的结尾(这取决于您给出的结果)效果略有不同).您还需要在.stop()之前拨打电话,.delay()这样您就不会清除.delay().请参阅jQuery doc.stop()以了解这两个参数.stop().当我在这里这样做:http://jsfiddle.net/jfriend00/pYgQr/,它似乎处理快速悬停/进出就好了.

// On hover function
var hover = $('#container');
hover.hover(function(){

    $(this).find('#first').stop(true, true).animate({left:10}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:10}, 600);
     $(this).find('#third').stop(true, true).delay(250).animate({left:10}, 600);

}, function() {

    $(this).find('#first').stop(true, true).animate({left:-100}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:-100}, 600);
    $(this).find('#third').stop(true, true).delay(250).animate({left:-100}, 600);

}); // on mouse out hide divs

另外,我不知道你为什么一开始这样做:

var hover = $('#container');
$(hover).hover(function(){

你可以这样做:

var container = $('#container');
container.hover(function(){

或这个:

$('#container').hover(function(){

此外,没有理由这样做:

$(this).find('#first')

这些是必须在页面中唯一的ID,因此最好使用:

$('#first')

这在jQuery中会更快,因为它可以在document.getElementById('first')内部使用.