jquery - 子要素を持つdivでjQueryのホバーとマウスアウトを機能させる方法

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>

内容に関係なく、#footer 全体で hover/mouseout を機能させるにはどうすればよいでしょうか?

助けてくれてありがとう！