Adding a reverse jquery animation when rolloff

Question

I'm trying to make the title animate down when you rolloff the hit area. You will notice its currently working on rollover, title animates up 20px, so basically when you rolloff the title should return to its starting position.

Live Example

HTML

<div class="thumb">
    <div class="content">
        <div class="copy">
             <h1>Title</h1>
        </div>
    </div>
</div>

JS

$('.content').hide().removeClass('content').addClass('content-js');

$('.thumb').hover(function () {
    $(this).find('.content-js').fadeToggle();
    $('.copy h1').animate({'margin-top':'0px'});
});

Answer 1

Just add another animation in the .hover() (which takes two parameters : mouse enter and mouse leave)

http://jsfiddle.net/aGcpR/12/

Answer 2

Instead of the hover() shortcut, use mouseenter / mouseleave, and put everything in one single function :

$('.content').hide().removeClass('content').addClass('content-js');

$('.thumb').on('mouseenter mouseleave', function(e) {
    var dir = e.type == 'mouseenter';
    $(this).find('.content-js').fadeToggle();
    $('.copy h1').animate({'margin-top': (dir ? 0 : 20)});
});

FIDDLE