Question

出于某种原因，我无法让它超时 - 我想要延迟，因为此时，当用户只是将鼠标移动到元素上时它开始弹跳，如果用户越过按钮，鼠标三次，弹跳会反弹，你猜对了 - 三次！

所以我的想法是在激活反弹功能之前将反应延迟250ms。

Hoverintent引起了我的注意，所以我尝试了一个settimeout？

<script type='text/javascript'>//<![CDATA[ 
$(function(){
//Hover your mouse pointer over the orange box
$('#myimage').mouseenter(function() {

    $(this).effect('bounce',500);
});
});//]]>  

</script>

马特

Answer 1

如果我已正确理解您的问题，则问题不在于delay，因为即使用户错误地将鼠标移到图像上它也会开始反弹，而是设置一个标记以检查鼠标是否为在图像上至少500毫秒，然后激发图像反弹效果。

 var flag = false;
 $('#myimage').hover(function(){
      flag = true;
      var that = $(this);
      window.setTimeout(function(){
          if(flag) that.effect('bounce', 500);
      }, 300);
 }, function(){
      flag = false;
 });

Answer 2

您遇到的元素弹跳三次的行为是因为动画队列在每个mouseenter事件上构建，您可以通过调用.stop(true,true)来结束当前动画并在每次效果开始时清除队列来防止这种情况：

$(function(){
     $('#myimage').mouseenter(function() {
         $(this).stop(true,true).effect('bounce',500,function(){
             $(this).css('top',0);
         });
    });
});

<强> Demo fiddle

在mouseenter功能中设置定时器/设置超时延迟

2 个答案: