Return to Question

I was thrilled when I first came across the .animate function of jQuery. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code for this question for a similar animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

I was thrilled when I first came across the .animate function of jQuery. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code for this question for a similar animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

I was thrilled when I first came across the .animate function of jQury. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code for this question for a similar animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

I was thrilled when I first came across the .animate function of jQuery. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code for this question for a similar animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

I was thrilled when I first came across the .animate function of jQury. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

I was thrilled when I first came across the .animate function of jQury. But if I e.g. change the color of a box with this function on .mouseover, it will (of course) complete the animation, although the mouse has already left the box and another animation that reverses the color was called on .mouseleave.

This leads e.g. to flapping if you hover over the box multiple times with your mouse and the animation is repeated 20 times or something.

To stop an animation / to reverse the color change if the mouse is not longer on the box you can use e.g. this combination of functions of this question that has already been asked: jQuery - Animation transition interrupted by hover

Here is the example code for this question for a similar animation: http://jsfiddle.net/B9wx8/30/

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

This seems not very elegant and complicated. Is there some jQuery function that is pretty much like .animate, but reverses the animation after e.g. the mouse is not longer in the box?

Something like:

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );