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 に答える