Question

我正在使用以下代码作为缩略图上的悬停功能：

$(function (){      
  $('.button').hover(function() {  
    if ($(this).is(":not(animated)")) {
      $(this).animate({opacity: 0.7}, 'fast');
    }
  },
  function() {
    $(this).animate({opacity: 1}, 'fast' );
  });
});

问题在于，当我过快地翻过拇指时，效果会持续闪烁一段时间...是否有什么东西可以添加到if块以防止这种情况发生？

Answer 1

使用stop()在开始新动画之前停止当前动画，它应该有效：

$(function (){      
    $('.button').hover(function() {  
        $(this).stop().animate({opacity: 0.7}, 'fast');
    },
    function(){
        $(this).stop().animate({opacity: 1}, 'fast' );
    });
});

Answer 2

您可以强制效果不排队：

$(function() {
   $('.button').hover(function(){ 
        $(this).animate({opacity: 0.7}, { duration: 'fast', queue: false });
    },
    function(){
        $(this).animate({opacity: 1}, { duration: 'fast', queue: false } );
    }
);
})

Answer 3

hoverIntent plugin用于此目的，请查看。要使用默认选项应用它，您只需更改：

$('.button').hover(function(){

为：

$('.button').hoverIntent(function(){

jQuery动画悬停闪烁失控

3 个答案: