Question

我是jQuery的新手。我有这段代码。这是fiddle的链接。在这里，您可以看到何时悬停在#flip上它会向下滑动，当您将鼠标移出时它会向下滑动。从现在开始它的工作正常。但是我希望有hoverIntent这样如果有人会用它来悬停和播放，那么它不会影响幻灯片自动运行。我的jQuery代码看起来像这样

<script> 
$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

Answer 1

添加stop以停止当前正在运行的动画。

$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").stop(true, true).slideToggle("slow");
  });
});

第一个参数用于删除排队的动画，第二个参数用于立即完成当前动画。

检查documentation

更新演示：http://jsfiddle.net/Rqq6c/1/

Answer 2

将您的内容包装在容器元素中，并将悬停事件附加到该容器元素中。这样你就没有真正停止在任何一个元素上盘旋。

<强> HTML

<div id="container">
  <div id="flip">Hover on panel to slide the panel down or up</div>
  <div id="panel">Hello world!</div>
</div>

<强>的Javascript

$(document).ready(function(){
  $("#container").hover(function(){
    $("#panel").slideToggle("slow");
  });
});

查看更新的jsFiddle demo

Answer 3

如果用户只是用鼠标在元素上旅行，幻灯片将不会触发，以防止挫折:) 如果鼠标仍然在#panel之上，则会在显示#flip之前等待300毫秒！

使用数据属性

悬停意图

的 LIVE DEMO

var $panel = $('#panel'); $("#flip").on('mouseenter mouseleave', function( e ) { return e.type=="mouseenter" ? panelOn() : panelOff() ; }); function panelOn() { $panel.data('wait', setTimeout(function(){ $panel.stop().slideDown(600); },300) ); } function panelOff() { clearTimeout( $panel.data('wait') ); $panel.stop().slideUp(600); }

此外，如果您希望在我们悬停它时保持#panel打开，请将元素添加到父元素，并将触发元素选择器更改为其ID

jQuery鼠标悬停意图使用

3 个答案: