How to animate an image to look like its flashing...

Question

Hi Guys,

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 toggle function - http://api.jquery.com/toggle/

$('#target').toggle(function() {
  $('#header ul li#checkit').addClass('on').removeClass('off');
}, function() {
  $('#header ul li#checkit').removeClass('on').addClass('off');
});

Answer 2

Use setInterval:

setInterval(function()
{
    // Get the elements and toggle classes
    $('#header ul li#checkit a').toggleClass('on');
}, 500);

You wouldn't need an 'off' class, you could just style the 'on' differently.

I did notice that you were trying to change the class of the li, but setting it on the anchor in CSS. Add or remove that a depending on which element you want

Answer 3

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');)

Answer 4

Thanks to Gaby

$(document).ready(function() {

   setInterval(
    function(){
        $('#checkit a').toggleClass('on');
    },500
   );

});