replicate bing image homepage effect with jquery (fade in, then fade out)
So, I want to be able to replicate the effect seen on bing.com. When you first go there, it loads an image background, and it fades in a bunch of seemingly random boxes that fade in over the image. The boxes THEN fade back out, indicating that they are hidden, but giving you an initial indication as to their location.
I am using jquery to do the initial fadeIn, but I want to delay it for a set time, then have it fadeOut. The rest of the effects are done with css3 transitions.
Here's what I'm using right now:
<script type="text/javascript">
$(document).ready(function () {
$('.floatBtn').hide().fadeIn(1000);
});
</script>
Any advice and help would be appreciated!
You can use .delay() between function calls to do exactly that. (delay it by an ammount of time.)
So use $(document).ready(function () { $('.floatBtn').hide().fadeIn(1000).delay(5000).fadeOut(1000); });