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

Answer 3

lots of ways to do this. here is my solution:

give .content a display of none so we don't have to do it with javascript:

    .content {
        display: none;
    }

modify the javascript to use mouseenter and mouseleave with on and catch elements in variables:

    var $thumb = $(".thumb");
    var $jsContent = $(".content");
    var $copyHeader = $jsContent.find(".copy h1");

    $thumb.on("mouseenter", function () {
        $jsContent.fadeIn();
        $copyHeader.animate({"margin-top":"0px"});
    });

    $thumb.on("mouseleave", function () {
        $jsContent.fadeOut();
        $copyHeader.animate({"margin-top":"20px"});
    });