JQUERY：在動畫菜單選項卡上設置活動狀態

我有使用JQuery在mouseover和mouseout事件上設置BG位置的圖像精靈。當我使用JQUERY設置活動狀態BG位置時，它可以正常工作，直到我將光標移離活動「選項卡」，然後觸發mouseout事件動畫。JQUERY：在動畫菜單選項卡上設置活動狀態

我想要的是mouseClick事件來停止活動選項卡上的動畫，但仍然允許動畫效果在其他選項卡上工作，以及何時單擊另一選項卡以將活動狀態從當前選項卡移至新的「活動」選項卡。

JQuery的

$(function(){ 

/* This script changes main nav links hover state*/ 

$('.navigation a') 
.css({backgroundPosition: "-1px -120px"}) 
.mouseover(function(){ 
$(this).stop().animate({backgroundPosition:"(-1px -240px)"}, {duration:400}) 
     }) 


.mouseout(function(){ 
    $(this).stop().animate({backgroundPosition:"(-1px -120px)"}, {duration:400, complete:function(){ 
    $(this).css({backgroundPosition: "-1px -120px"}) 

    }}) 


    }) 

}); 

$(document).ready(function(){ 
$("a").click(function(){ 
$(this).css({backgroundPosition: "-1px -235px"});          

}); 
});

HTML

<ul class="navigation"> 

<li><a href="#index" tabindex="10" title="Home" id="homeButton"></a></li> 
<li><a href="#about" tabindex="20" title="About us" id="aboutButton"></a></li> 
<li><a href="#facilities" tabindex="30" title="Our facilities and opening Times" id="facilitiesButton"></a></li> 
<li><a href="#advice" tabindex="40" title="Advice and useful links" c id="adviceButton"></a></li> 
<li><a href="#find" tabindex="50" title="How to find Us" id="findButton"></a></li> 
<li><a href="#contact" tabindex="60" title="Get in touch with us" id="contactButton"></a></li> 

</ul>

You can see what I've got so far here

提前感謝所有幫助

來源

2010-04-09 The Pixelworx

$("ul li").click(function(){ 
    $("ul li.active").removeClass('active'); 
    $(this).stop().addClass('active'); 
})

來源

2010-04-09 20:23:02 Pickle

嗨Pickle感謝您的回覆，不幸的是我已經嘗試過這個解決方案了，但它似乎是因爲我已經明確地在Jquery中設置了css背景位置，它似乎覆蓋了我一旦設置好的「活動」css類出。 – 2010-04-12 08:57:18

JQUERY：在動畫菜單選項卡上設置活動狀態

回答

相關問題