2

当鼠标打开和鼠标离开元素时，我正在使用此代码在两个图像之间淡入淡出。当鼠标移动太快时，这会产生一些不适当的过渡。如何防止这种情况？

我的代码：

$('.prods li').live('mouseenter',function() {
    $(this).children('.label').stop().animate({top: '80%',opacity: 1}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeOut(800);
        $(this).children('.producthover').fadeIn(800);
    }
}).live('mouseleave',function() {
    $(this).children('.label').stop().animate({top: '50%',opacity: 0}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeIn(800);
        $(this).children('.producthover').fadeOut(800);
    }
});
4

2 回答 2

2

您是否尝试过更改.stop()为.stop(true,true)?

于 2012-09-02T19:28:49.580 回答
1

您可以检查意图。

基本上你需要延迟动画的执行，以确保在最短的时间内没有发生另一个动作。

var mouseEnterTimer = null;

$('.prods').on('mouseenter', 'li',  function(){

   /*clear timer since another mouseenter has occured within 200 ms */
   clearTimeout(mouseEnterTimer); 


   /*now queue up another one to execute 200 ms later*/
   mouseEnterTimer = setTimeout)function(){
      //all your animation logic here

   }, 200); 
});

这确保了即使鼠标快速移入和移出相关区域，事件也只触发一次。

您可能想进一步了解去抖动事件。（以及它们与节流有何不同）

此外，已经有一个出色的hoverIntent 插件（等等）。

于 2012-09-02T19:19:44.103 回答