How to show a div for some time and hide it after some time
Posted by navaneeth on Nov 28, 2012 in HTML, Javascript, Jquery | No comments yet
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