How to make jQuery hover and mouseout work on div with child elements

Question

We are using this to animate our #footer:

$('#footer')
    .hover(function(){
        if(!$(this).is(".open")) {
        $(this).animate({bottom: -25}, 500).addClass('open');
        }})
$('#footer')
    .mouseout(function(){
        if($(this).is(".open")) {
        $(this).stop().animate({bottom: -57}, 500).removeClass('open');
        }})

However, #footer contains some child elements which stop the animation from working:

<div id="footer">
    <ul>
        <li><a href="#"><img src="abc" /></a><a href="#">ABC</a></li>
    </ul>
    <div id="kontaktdaten">
        <ul>
            <li>Adresse1</li>
        </ul>
    </div>
</div>

How do we make hover/mouseout work on the whole of #footer, no matter what it contains?

Many thanks in advance for any help!

Answer 1

You need to use mouseleave event instead of mouseout, the hover() method allows you to register both those handlers as given below

$('#footer').hover(function () {
    $(this).stop().animate({
        bottom: -25
    }, 500).addClass('open');
}, function () {
    $(this).stop().animate({
        bottom: -57
    }, 500).removeClass('open');
})

Answer 2

Use the hover function like this function(){},function(){}

$('#footer')
    .hover(function () {
    if (!$(this).hasClass("open")) {
        $(this).animate({
            bottom: -25
        }, 500).addClass('open');
    }
}, function () {
    if ($(this).hasClass("open")) {
        $(this).stop().animate({
            bottom: -57
        }, 500).removeClass('open');
    }
})

DEMO