Как заставить jQuery hover и mouseout работать на div с дочерними элементами

Question

Мы используем это для анимации нашего #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');
        }})

Однако #footer содержит некоторые дочерние элементы, которые мешают анимации работать:

<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>

Как заставить работать hover / mouseout на всем #footer, независимо от того, что он содержит?

Заранее большое спасибо за любую помощь!

Answer 1

Вы должны использовать событие mouseleave вместо mouseout, метод hover() позволяет зарегистрировать оба этих обработчика, как показано ниже

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

Answer 2

Используйте функцию наведения, как это 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