jQuery悬停的情况

Question

所以我有了这样的代码，它创建了一个div来阻止复选标记的图像，然后向右滑动，使其看起来像复选标记正在绘制。一切工作正常，除非我希望代码执行，就好像用户呆了一段时间，即使用户只徘徊在一秒钟。目前，当用户停止悬停时，动画停止。谢谢你们！

$('li.activated').hover(function() { 
    $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox')); 
}, function() { 
    $('ul.actilist').find('div.slidebox').remove(); 
}); 

$('li.activated').hover(function() { 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}, function() { 
    if($('div.slidebox').width() < 17){ 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    } 
}); 

Answer 1

我不是太熟悉的hover()功能，但代码应该排队动画（未测试）：

$('li.activated').mouseenter(function() { 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}).mouseleave(function() { 
    if($('div.slidebox').width() < 17){ 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    } 
}); 

Answer 2

可以使用setTimeout功能延迟MouseLeave事件：

setTimeout(function() { 
    $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
}, 800); 

你想要什么，不过，因为如果用户从移动鼠标，匆忙回到这不会做的相当，那么div会进一步萎缩，然后重新长出其超时到期后的预期大小。 （重复执行此操作可能会导致div简短地缩小为无）。为防止出现此情况，您需要防止在“取消的mouseleave”情况下触发悬停事件。这需要多一点代码：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    }, 800); 
});​ 

的jsfiddle：http://jsfiddle.net/uUjhJ/2/

这主要是工作，但也有一些勤奋老鼠挥舞着，有可能使动画“破解”，并开始抽水，像波纹管（直到它通过动画队列）。这是通过在mouseleave动画播放过程中将鼠标移回来开始的，而且我唯一可以找到解决此问题的方法是将“队列”选项设置为false，并将动画值更改为固定值（而不是比相对值使用+ =和 - =）：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false}); 
    }, 800); 
});​ 

的jsfiddle：http://jsfiddle.net/uUjhJ/3/

理论上应该可以通过保持状态的仔细跟踪和使用回调的调用，使原来的方法正常工作到animate，但它非常挑剔，我还没有能够使其工作。

编辑：啊，错过了你还想在悬停事件中添加/删除div。这样做的工作：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    if(!$('div.slidebox').length) 
     $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox')); 
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false,complete: function() { 
      if($(element).is(':hover')) return; 
      $('ul.actilist').find('div.slidebox').remove(); 
     }}); 
    }, 800); 
});​ 

注意，该元素在“完整”的回调去除，以确保它的动画，而不是之前后取出，并同时添加代码和删除代码仔细检查，他们不会与任何内容冲突（重新显示时重复添加或删除）。

的jsfiddle：http://jsfiddle.net/uUjhJ/4/