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;
}

jquery动画无法正常工作

2 个答案: