Javascript – Jquery Opacity Fade In Out Loop

cssjavascriptjquery

One of my clients asked me to make a blinking effect on a div. I think that might not be the best thing for him, maybe light fading in and out of opacity will get the attention of his customers, without annoying them.

I currently have

 <a class="special_button" href="#">Special Offers &rsaquo;</a>

I have the following code for another div, which causes a fade in on browser load : 

$('.logo-top').delay(700).animate({
     'opacity' : '1',        
     'top' : '+=40px'
}, { duration: 700, easing: 'swing' });

How would I do something similar for the special_button, but instead looping the opacity? From say 80 to 100?

It would even be better if it looped a certain amount of times, maybe like 5.

Best,
Stepan

Best Answer

You probably want to have something like this jsFiddle.

And you can also indicate the number of times you want this to blink, just by keeping a counter.

Code from jsFiddle:

$(document).ready(function() {
     function runIt() {           
       var baloon = $('#baloon');
       baloon.animate({opacity:'1'}, 1000);
       baloon.animate({opacity:'0.5'}, 1000, runIt);
    }
    runIt();
});
Related Topic