Question

I have a simple little div being created when the user mouseEnters an <h1> tag. I’m creating the div with prepend(). Once this div is dynamically created, is there any way I could have a delayed fade out? Lets say 4 seconds after the div is created? Any help is much appreciated as always.

I checked out this previous post but it’s not helping.

Here’s what I’m working with:

$('.sitename').mouseenter(function(){
    $(this).parent().prepend('<div class="mobile_pop">Available on All Mobile Devices</div>');
});//end mouseEnter

Answer 1

You can do this :

$('.sitename').mouseenter(function(){
    var $div = $('<div class="mobile_pop" style="display:none;">Available on All Mobile Devices</div>');
    $(this).parent().prepend($div);
    setTimeout(function(){$div.fadeIn()}, 4000);
});

It simply registers with setTimeout a function fading in the div you created.

Demonstration (the div is simply added to the body)