Question

亲爱的专家，

我有一个问题。我是Jquery的新手，我正在尝试根据下面给出的示例代码使用div动画。会发生的事情是，当鼠标在div上以不同的速度徘徊不同时间时，动作会自我复制并导致我想要以某种方式避免的可用性行为。有没有办法让函数检查鼠标行为，例如div在给定的时间内悬停，以避免不必要的多次激活？我希望我解释得很好。

感谢您的意见。

$(document).ready(function() {

$("#expand_smoke").hover(
         //on mouseover
          function() {
              $(this).animate({
              height: '+=125' //adds 125px
               }, 'slow' //sets animation speed to slow
              );
           },
         //on mouseout
          function() {
              $(this).stop()
             $(this).animate({
             height: '60' //changes back to 60px
        }, 'slow'
      );
    }
  );

});

Answer 1

为什么不这样做？

$("#expand_smoke").hover(
    function() {
        $(this).stop().animate({ height: '200' }, 'slow');
    },
    function() {
        $(this).stop().animate({ height: '60' }, 'slow');
    }
);

Answer 2

如果我理解正确的话，这应该有效：它在悬停时开始超时，在mouseout上取消它，所以动画只有在你将它悬停至少500毫秒时才会启动。

var timeout = null;
$("#expand_smoke").hover(
    //on mouseover
    function() {
        timeout = setTimeout(function(){
            $(this).animate({height: '+=125'}, 'slow');
        },500);
    },
    //on mouseout
    function() {
        clearTimeout(timeout);
        $(this).stop().animate({height: '60'}, 'slow'
    );
});

Answer 3

我的项目需要同样的东西，我建议你使用hoverIntent插件，这对我很有帮助，试试吧。

在悬停时停止不必要的重复div

3 个答案: