Effect Delay Trick

Effect Delay Trick

Here is a quick trick for getting an effect to delay without using setTimeout.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#show-alert').click(function() {
$('<div class="quick-alert">Message Effect Delay Trick</div>')
.insertAfter( $(this) )
.fadeIn('slow')
.animate({opacity: 1.0}, 3000)
.fadeOut('slow', function() {
$(this).remove();
});
});
});
</script>
<style>
.quick-alert {
width: 50%;
margin: 1em 0;
padding: .5em;
background: #ffa;
border: 1px solid #a00;
color: #a00;
font-weight: bold;
display: none;
}
</style>
<input type="submit" value="Show Alert" id="show-alert">

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/Effect_Delay.html