2

我是新手jQuery。我有这段代码。这是小提琴的链接。在这里你可以看到当你将鼠标悬停在#flip它上面时它会向下滑动，当你将鼠标移出时它会向下滑动。现在从这一点开始它的工作正常。但我希望会有hoverIntent这样的情况，如果有人玩悬停并离开它，那么它不会影响幻灯片自动运行。我的 jQuery 代码看起来像这样

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

3 回答 3

1

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

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

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

检查文档

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

于 2013-04-06T06:29:20.923 回答
0

如果用户只是将鼠标悬停在元素上，则不会触发幻灯片，以
防止挫败感:)
将等待 300 毫秒，然后再显示#panel鼠标是否仍在#flip！

使用数据属性的 悬停意图

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

于 2013-04-06T06:42:53.943 回答
0

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

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 演示

于 2013-04-06T06:31:53.777 回答