1

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

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

Hoverintent 让我大吃一惊，所以我正在尝试设置超时？

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

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

</script>

马特

4

2 回答 2

2

如果我正确理解了您的问题，则问题不delay在于即使用户错误地将鼠标移到图像上，也已触发 mouseenter 它将开始反弹，而是设置一个标志以检查鼠标是否在图像上至少持续 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;
 });
于 2013-08-19T19:48:39.327 回答
0

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

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

演示小提琴

于 2013-08-19T19:59:59.793 回答