Question

我制作了一个悬停菜单，其中我创建了一个小效果，它的工作正常，但是当我们从一个链接快速转换到另一个链接时，效果很长。我想在转移到另一个链接后立即停止其他动画，这是代码。

<script type="text/javascript">
$(function(){

    $('.menu a').bind({
  mouseover: function() {

        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow")
    },
  mouseout: function() {

        $(this).next("em").animate({opacity: "hide", top: "-75"}, "slow");
    }
});

    })
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #000000;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
    background: url(images/button.gif) no-repeat center center;
}
.menu li em {
    background: url(images/hover.png) no-repeat;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>

<ul class="menu">
    <li>
        <a href="http://www.webdesignerwall.com">Web Designer Wall</a>      
        <em>A wall of design ideas, web trends, and tutorials</em>
    </li>
    <li>
        <a href="http://bestwebgallery.com">Best Web Gallery</a>
        <em>Featuring the best CSS and Flash web sites</em>
    </li>
    <li>
        <a href="http://www.ndesign-studio.com">N.Design Studio</a>
        <em>Blog and design portfolio of WDW designer, Nick La</em>
    </li>
</ul>

</body>

Answer 1

尝试使用此代码停止动画（添加stop（）会立即停止当前正在运行的动画。）

$(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow")

Answer 2

script type="text/javascript">
$(function(){

    $('.menu a').bind({
  mouseover: function() {

        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow")
    },
  mouseout: function() {

        $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
    }
});

    })
</script>

你可以试试这个希望它有效..你可以将mouseout改为“fast”来快速隐藏上一个动画.. 或添加 mouseout函数中的$(this).next("em").stop().animate({opacity: "show", top: "-75"}, "fast")

需要有关悬停菜单的帮助

2 个答案: