需要關於懸停菜單的幫助

我做了一個懸停菜單，其中我創建了一個小的效果，它的工作正常，但是當我們從一個鏈接快速切換到另一個時，效果很長時間。只要我轉移到另一個鏈接，我想停止其他動畫，這裏是代碼。需要關於懸停菜單的幫助

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

來源

2012-11-19 user1802932

嘗試使用此代碼停止動畫（加入終止（）當前正在運行的動畫立即停止）。

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

來源

2012-11-19 07:55:28

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>

你可以試試這個，希望它的工作原理..你可以改變鼠標移開，以「快」來隱藏一個動畫快.. 或添加 $(this).next("em").stop().animate({opacity: "show", top: "-75"}, "fast")在鼠標移開功能

來源

2012-11-19 08:01:01

需要關於懸停菜單的幫助

回答

相關問題