Hover out jQuery elastic slide-back not working

Question

I'm having a bit of an issue getting the return animation to play on the hover out state.

$("#porttab").hover(function(){
    $(this).stop().animate({"top" : "40px"}, {
        duration: 'slow',
        easing: 'easeOutElastic'
    }, function(){
        $(this).stop().animate({"top": "-40px"}, {
            duration: 'slow',
            easing: 'easeOutElastic'
        });
    });
});

I don't know what I'm doing wrong here, but I'm a bit of a jquery noob so please be gentle.

And I'm using the easing plugin, if that makes a difference.

score 3 · Accepted Answer · answered Apr 23 '12 at 20:24

3

I think there you missed to close the first argument of the hover.. See below

$("#porttab").hover(function() {
    $(this).stop().animate({
        "top": "40px"
    }, {
        duration: 'slow',
        easing: 'easeOutElastic'
    });
}, function() {
    $(this).stop().animate({
        "top": "-40px"
    }, {
        duration: 'slow',
        easing: 'easeOutElastic'
    });
});

answered Apr 23 '12 at 20:24

Selvakumar Arumugam

79,297
15
120
134

You're a lifesaver, bud! This was driving me mad. – Ben Singer Apr 23 '12 at 20:29
Correct repayment for lifesaving is clicking the checkmark next to his answer. :) – Jeff B Apr 23 '12 at 20:30

Hover out jQuery elastic slide-back not working

1 Answers1