I have a menu list that animates the background position on mouseover and this is working. When backgroundPosition: 0 the menu item is active. But I want the first item in the list to return to being active when the user is not hovering over the other list items.
This is what I have so far, The movesover animated effect is working but Im not sure how to get the first item to return to being active state.
jQuery
$(function() {
//Edited...
//services menu background effect
var timer;
function invocation() {
timer = setTimeout(function() {
$('#services li:first a').stop().animate({
backgroundPosition: 0
}, 500);
}, 300);
}
$('li.menu a').each(function() {
$(this).css({
backgroundPosition: -416
});
$(this).mouseover(function() {
$(this).stop().animate({
backgroundPosition: 0
}, 500)
if ($(this).attr('id') != 's_active') {
$('#services li:first a').stop().animate({
backgroundPosition: -416
}, 500);
}
clearTimeout(timer);
}).mouseout(function() {
hover = false;
$(this).stop().animate({
backgroundPosition: -416
}, 500)
invocation();
});
});
$('#services li:first a').css({
backgroundPosition: 0
}, 500);
//invocation();
});
HTML
<div id="services">
<h1>Services</h1>
<ul>
<li id="s_active" class="menu"><a href="#">Semi / Intensive courses</a> </li>
<li class="menu"><a href="#">Pass plus / Motorway tuition</a></li>
<li class="menu"><a href="#">Block bookings</a></li>
<li class="menu"><a href="#">Mock theory and Mock practical tests</a></li>
</ul>
</div>