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