jquery动画不能正常工作

Question

好的，我有一个导航栏和一个触发器具有相同的类，我的想法是当触发器悬停时，jquery会将触发器和导航栏的移动都发送到动画中，导航栏通过页面底部的溢出隐藏起来。

我得到了jquery动画，但我的问题是，当我将鼠标悬停在触发器上，然后移动到具有相同类的导航栏时，它会再次将工具栏的隐藏发送到运动中，而不是保持打开状态，因为我将鼠标悬停在它上面。我不确定如何让触发器和导航栏在打开后保持不动，直到我不再悬停在这两个项目上。

这里是一些基础知识(在wordpress中运行，这就是为什么jQuery胜过$)：

jQuery(document).ready(function() {

    jQuery('.nav').hover(function() {
        jQuery('.nav').animate({
            bottom: "0px"
        }, 1500);
    }, function() {
        jQuery('.nav').animate({
            bottom: "-40px"
        }, 1500);
    });        
});

HTML：

<div class="nav nav-trigger" id="nav-trigger"><a href="#">Navigate</a></div>
<div class="nav" id="nav-bar"><a href="#">Home</a></div>

CSS：

.nav {position:absolute; bottom:-40px;}
.nav-trigger {margin-left:50%; left:-100px;}
#nav-trigger {height:80px; width:200px; background:#bd265e; color:#fff;}
#nav-bar {height:40px; width:100%; background:#bd265e; color:#fff; text-align:center;}

Answer 1

您有两个.nav元素。当你将鼠标悬停在第一个.nav上时，它会向上滑动，你的鼠标会从第一个滑动到第二个滑动，触发向下滑动和向上滑动，依此类推。

最简单的解决方案是在开始新动画之前对所有动画执行.stop操作：

jQuery(document).ready(function() {

    jQuery('.nav').hover(function() {
        jQuery('.nav').stop().animate({
            bottom: "0px"
        }, 1500);
    }, function() {
        jQuery('.nav').stop().animate({
            bottom: "-40px"
        }, 1500);
    });
});

http://jsfiddle.net/mblase75/LwyAB/

Answer 2

用CSS来做吧！

http://jsfiddle.net/a7nM3/

将所有内容都放在用于悬停的包装器中

<div class="wrapper">
    <div class="nav nav-trigger" id="nav-trigger"><a href="#">Navigate</a></div>
    <div class="nav" id="nav-bar"><a href="#">Home</a></div>
</div>

然后进行一些转换

body
{
    overflow:hidden;
}

.wrapper
{
    position:absolute;
    bottom:-40px;
    width: 100%;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper:hover
{
    bottom:0px;
}