Lets make an div that stays lit up for 2-3 seconds and take 1 second to blink.
we can use the jQuery’s fadeIn and fadeOut to make the div blink

Create an div

<div class="blow"></div>

Having the style as

.blow
{
background:red;
width:50px;
height:50px; 
float:left
}

The jQuery portion

$(document).ready(function() {
$('.blow').bind('fade-cycle', function() {
    $(this).fadeOut(300, function() {
        $(this).fadeIn(500, function() {
            $(this).trigger('fade-cycle');
        }).delay(3000);
    });
});

$('.blow').each(function(index, elem) {
    setTimeout(function() {
        $(elem).trigger('fade-cycle');
    }, index * 250);
});

});​

In this code the effects apply to all the elements with class blow

Leave a Reply

Your email address will not be published.