3

尊敬的专家,

我有个问题。我是 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'
      );
    }
  );

});
4

3 回答 3

5

你为什么不这样做呢?

$("#expand_smoke").hover(
    function() {
        $(this).stop().animate({ height: '200' }, 'slow');
    },
    function() {
        $(this).stop().animate({ height: '60' }, 'slow');
    }
);
于 2012-10-02T21:49:52.633 回答
2

如果我理解正确,这应该可以工作:它在悬停时开始超时,在鼠标悬停时取消它,所以动画只有在你悬停至少 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'
    );
});
于 2012-10-02T21:53:12.757 回答
1

我的一个项目需要同样的东西,我向你推荐hoverIntent插件,它对我来说做得很好,试试吧。

于 2012-10-02T21:46:02.200 回答