JQUERY: Setting Active state on animated menu tabs
Posted
by Tony
on Stack Overflow
See other posts from Stack Overflow
or by Tony
Published on 2010-04-09T17:19:37Z
Indexed on
2010/04/09
17:23 UTC
Read the original article
Hit count: 463
I have image sprites that use JQuery to set the BG position on mouseover and mouseout events. When I set the active state BG position using JQUERY it works fine until I move my cursor away from the active 'tab' which then fires the mouseout event animation.
What I want is the mouseClick event to stop the animation on the active tab but still allow the animation effect to work on the other tabs, and when another tab is clicked for the active state to be removed from the current tab to the new 'active' tab.
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
Thanks in advance for any help
© Stack Overflow or respective owner