jquery在悬停时暂停恢复

Question

我无法理解为什么停止工作。

我已经在这里建立了一个例子：

http://jsfiddle.net/MNT4e/

暂停/恢复悬停正常工作，后2个循环但它停止。

如何使悬停功能持续工作？

Answer 1

Live Demo（除去一堆用于测试目的列表项）

，因为我敢肯定不使用暂停/恢复插件这是造成这个问题。它所做的只是停止悬停的动画，并在离开时重新开始动画。由于您已经将动画设置为基于当前位置，因此它将恢复正常。

编辑 修复了每次悬停时动画变慢的问题。现在应该完美地工作，而不管它循环的时间。

var vox_news = 0; 

$('.voxNews li').each(function() { 
    vox_news += $(this).outerWidth(true); 
}); 

$('.voxNews').parent().append($('.voxNews').clone()); 
    function setupNews(w) { 
     function phase1() { 
      var voxNews = $('.voxNews').first(), 
       curMargin = voxNews.css('margin-left').replace("px", ""), 
       animSpeed = (w*20) - (Math.abs(curMargin)*20); 

      voxNews.animate({'margin-left' : '-' + w + 'px'}, animSpeed, 'linear', phase2); 
     } 
     function phase2() { 
      $('.voxNews').first().css({'margin-left' : '0px'}); 
      phase1(); 
     } 
     $('.voxNews li a').hover(function() { 
      $('.voxNews').stop(); 
     }, function() { 
      phase1(); 
     }); 
     phase1(); 
    } 

setupNews(vox_news); 

Answer 2

我想你应该这样定义一个全局布尔变量：

var isAnimating = false; 

然后控制基于该变量的动画。例如：

animateNews() { 
    if (isAnimating) { 
     //list animation 
    } 
} 

listResume() { isanimating = true; } 

listPause() { isanimating = false; } 

和动画会是这样：

window.onload = function() { var t = setTimeout("animateNews", 40); } 

我不会使用jQuery的那一个，因为jQuery使用很少的CPU，如果你还开始制作动画的东西，你愿意需要它，如果你想顺利增长盒子或幻灯片图片（画廊，或类似的东西）。

Answer 3

删除您hover处理器，添加：

$('.voxNews li').delegate('a', 'mouseenter', function() { 
    $('.voxNews').pause(); 
}); 
$('.voxNews li').delegate('a', 'mouseleave', function() { 
    $('.voxNews').resume(); 
});