Jquery append element to Div and hide on mouseout

Question

I am attempting to use Jquery to append a footer div into another div and have the newly appended footer div display on hover and slowly fade/hide afterwards. This is the code I have come up with so far:

<script type="text/javascript">
$('.xg_widget_main .module_forum .vcard').hover(function(){
$(this).append($('.module_forum .xg_module_foot').show('show'));
});
</script>

The obstacle I am facing with this code is that the appended div will not obey the .show('show') function and after the mouse is removed from the hover area the appended div does not fade out slowly, but instantly. Can someon advise what I am missing here?

Ok, i got the code to work using:

<script type="text/javascript">
$('.xg_widget_main .module_forum .vcard').hover(function(){
$('.module_forum .xg_module_foot').hide().appendTo(this).show('slow');
});
</script>

But, the appended div does not remove/hide when the mouse is moved away from ('.xg_widget_main .module_forum .vcard'). Can someone suggest how this can be done?

score 0 · Answer 1 · answered Apr 29 '12 at 01:01

Because you are actually requesting a different behaviour on mouseout than mouse over, hover is the wrong solution. Hover manages both behaviours together.

$('.xg_widget_main .module_forum .vcard').mouseover(function(){
$('.module_forum .xg_module_foot').hide().appendTo(this).fadeIn('slow');
});

$('.xg_widget_main .module_forum .vcard').mouseout(function(){
$('.module_forum .xg_module_foot').fadeOut('slow');
});

Look at the mouseover and mouseout events, hook them up seperately and you'll be able to sort it out.

score 0 · Answer 2 · answered Apr 29 '12 at 01:10

$('.xg_widget_main .module_forum .vcard').on({
    mouseenter : function() {
         $('.module_forum .xg_module_foot').hide().appendTo(this).show('slow');
    },
    mouseleave: function() {
         $('.module_forum .xg_module_foot').hide('slow');
    }
});

Jquery append element to Div and hide on mouseout

2 Answers2