将活动状态添加到Jquery背景位置动画

我需要将活动状态添加到我的jquery动画导航菜单，但似乎无法使其工作。动画完美运行，但我需要它停止活动选项卡上的动画（网站中的当前页面）并继续处理其他动画等等。请帮助
这里是我的代码将活动状态添加到Jquery背景位置动画

HTML：

<div id="insideNav"> 
    <ul id="nav"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="media.php">Media</a></li> 
     <li><a href="overview.php">Overview</a></li> 
     <li><a href="mobile.php">Mobile</a></li> 
     <li><a href="options.php">Options</a></li> 
     <li><a href="order.php">Order</a></li> 
     <li><a href="contact.php">Contact</a></li> 
    </ul> 
</div>

CSS：

ul#nav { 
    width:1024px; 
    margin: 0 auto; 
    text-align:center; 
    overflow:hidden;  
} 
ul#nav li { 
    float:left; 
    list-style:none;  
} 
ul#nav li a { 
    display:block; 
    width:108px; 
    height:76px; 
    padding:15px 0 0 0; 
    margin:0 10px 0 10px; 
    font: italic 16px Georgia,"Times New Roman", serif; 
    color:#919090; 
    text-decoration:none; 
    background: url("../images/dropDown.png") 0 -149px no-repeat; 
} 
ul#nav li a:hover { 
    background: url("../images/dropDown.png") 0 0 no-repeat;  
    color:#ffffff; 
}

JQuery的：

$(document).ready(function() { 
    $("ul#nav li a").addClass("js"); 
    $("ul#nav li a").hover(
     function() { 
     $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200); 
     $(this).animate({backgroundPosition:"(0 -5px)"}, 150); 
     }, 
     function() { 
     $(this).stop(true,true).animate({backgroundPosition:"(0 -149px)"}, 200); 

     } 

    ); 

});

来源

2012-11-16 Caleb Klungtvet

您可以使用jQuery not（）函数，并添加当前页面的活动类，如

$('ul#nav li a').not('.active').hover(...

等等......

然后假设你的当前页面的媒体添加了一个类：

<li><a href="media.php" class="active">Media</a></li>

要完全删除悬停集CSS：

ul#nav li a.active:hover { background-position: 0 -149px; }

来源

2012-11-16 19:17:30 jtheman

谢谢@jtheman那种工作，它给了我一个静态图像，像我想要在活动页面上，但是当我再次将它悬停在它上面时，它会重新生成。对不起，我相当新的，如果你可以再详细说明一下代码。也许我错过了一些东西 –

你确定它不仅仅是css悬停状态的reanimates ul＃nav li a：hover – jtheman

将活动状态添加到Jquery背景位置动画

回答

相关问题