只有当鼠标位于div上时，jquery才能在鼠标悬停上运行

所以我有一个幻灯片页脚，但是如果我用鼠标在div上快速移动，它只发生在div的跳转，但我想要显示的内容，我创建了一个视频这里：http://screencast.com/t/CDQUDQP3所以你可以更好地理解它，如果我把鼠标悬停在一个慢一点点，它工作正常。只有当鼠标位于div上时，jquery才能在鼠标悬停上运行

这里是我的代码：

var $footer   = $('footer'), 
     $footerHeader = $('.footer-header'), 
     $footerDisplay = $('.footer-display'), 
     $totalHeight = ((parseInt($footerDisplay.css('height'))) + 50)+'px'; 
$('footer').stop(1,1).hover(function(){ 
    //mouse in 
    $footerHeader.css('visibility','hidden'); 
    $footerDisplay.stop(1,1).slideUp(function(){ 
     $(this).show(); 
     $footer.css('height',$totalHeight); 
    }); 
    $footer.stop(1,1).animate({'margin-top':'-'+$totalHeight}); 

},function(){ 
    //mouse out 
    $footer.stop(1,1).animate({'margin-top': '-57px','height':'57px'}); 
    $footerDisplay.stop(1,1).slideUp(); 
    $footerHeader.css('visibility','visible'); 
});

和HTML：

<footer> 
    <div class="footer-header"> 
     <h3> 
      <span class="sprite arrow-footer"><!-- dirty hack--></span> 
      OPEN 
     </h3> 
    </div><!--end footer-header--> 

    <div class="footer-display clearfix"> 
      <?php dynamic_sidebar("the_footer"); ?> 
    </div><!-- end footer-display--> 
</footer>

来源

2012-02-19 Uffo

您的网站的实时演示比截屏视频更有用。 – Blender 2012-02-19 20:12:20

不知道什么是错误的，但试着将停止中的所有数字改为布尔值，如stop（true，true）？ – adeneo 2012-02-19 20:15:29

请不要用'$'前缀每个JS变量的前缀。这样做可能是可以接受的，以明确一个变量包含一个jQuery对象，但totalHeight是一个简单的字符串。这不是PHP。 – TheShellfishMeme 2012-02-19 20:17:13

你需要hoverIntent，一个jQuery插件。从文档：

hoverIntent是一个插件，试图确定用户的意图......就像一个水晶球，只有鼠标移动！它的工作原理类似于（并源自）jQuery内置的悬停。但是，并不是立即调用onMouseOver函数，而是在进行调用之前等待用户的鼠标变慢。

阅读更多并下载它here。

来源

2012-02-19 20:14:00

只有当鼠标位于div上时，jquery才能在鼠标悬停上运行

回答

相关问题