javascript - Jquery unable to return to active state on animated menu list -
i have menu list animates background position on mouseover , working. when backgroundposition: 0 menu item active. want first item in list return being active when user not hovering on other list items.
this have far, movesover animated effect working im not sure how first item return 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 , mock practical tests</a></li> </ul> </div>
Comments
Post a Comment