0

我制作了一个悬停菜单，在其中创建了一个小效果，效果很好，但是当我们从一个链接快速切换到另一个链接时，效果会持续很长时间。我想在切换到其他链接后立即停止其他动画，这是代码。

<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>
4

2 回答 2

0

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

$(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow")
于 2012-11-19T07:55:28.037 回答
0 
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”以快速隐藏以前的动画..或添加 $(this).next("em").stop().animate({opacity: "show", top: "-75"}, "fast")mouseout功能

于 2012-11-19T08:01:01.863 回答