Question

Silly question 4 most, I guess, I’m trying to get my last li, which has an image for the background (a href) to look as if its a blinking image, changing from one colour to the next, its really just moving the background image from one position to the next, this is already working on hover using css, but id like to use jquery to animate this button to emulate the blinking effect…

I have my HTML code as follows..

<ul>
   <li id="view"><a href="#">One</a></li>
   <li id="contact"><a href="#">Two</a></li>
   <li id="checkit"><a href="#">Three</a></li>
</ul>

Ive created 2 extra classes in the css called on and off, which i though I could use in jquery to animate the a href,

#header ul li#checkit a.off{background-position: -352px 0;}
#header ul li#checkit a.on{background-position: -352px -73px;}

whats the best or easyiest way to either change the background every 0.5 sec or change the css from on to off to replicate that effect…

$(document).ready(function() {
       //$('#header ul li#checkit').addClass('on');
       //$('#header ul li#checkit').addClass('off');

       $('#header ul li#checkit').animate({ ? }, 150);
});

thanks in advance Marty.

Answer 1

Use the toggleClass() method which allows for multiple classes to be toggled

setInterval(
    function(){
         $('#header ul li#checkit').toggleClass('on off');
    },500
   );

You will need to first set one of the two classes on the li.. (or you can add it with jquery as you have in comments in your code $('#header ul li#checkit').addClass('on');)