0

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 );
Improve this question
2
  • 1
    Well no (as far as I'm aware) as it's a pretty specific animation. You can always write your own plugins for jQuery so you can call $('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 ); and have it do what you want though.
    – George
    Commented May 9, 2017 at 10:12
  • 1
    Btw., that’s a problem you would not have with CSS animations or transitions in the first place …
    – CBroe
    Commented May 9, 2017 at 10:13

2 Answers 2

Reset to default
1

Below code using CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bottom, .top {
    width: 200px;
    height: 200px;
}
.bottom { background-color: black; }
.top {
    background-color: red;
    transform: translate(0, 0%);
    transition: transform .3s ease;
    will-change: transform;
}
.top.covered { transform: translate(0, 100%); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('mouseover', '.bottom', function(){
        $(".top").addClass("covered");
    });
    $(document).on('mouseout', '.top', function(){
        $(".top").removeClass("covered");
    });
});
</script>
</head>
<body>
<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

And the fiddle: https://jsfiddle.net/beekvang/mpecfc1n/

Improve this answer
2
  • thank you for this good answer. Can you please the CSS shortly. I do not quite understand what you did there with transform and transition?
    – Fabian Schn.
    Commented May 9, 2017 at 14:52
  • I played a but with your code, now I understand it, that possibility is awesome! I will read a bit more about this!
    – Fabian Schn.
    Commented May 9, 2017 at 15:00
0

so you would prefer a call like this

$('.box1,.box2').animate_and_reverse_animation_if_hover_ends({top: 0}, {top: "-200px"}, 'slow');

where nobody (except you) has a clue whats going on - over this:

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

Second version is IMHO as elegant, simple and readable as it gets...in jQuery-world.

I suggest you just get on with it, and use the solution you already supplied in your question. But if you must, you could write your own jQuery.animate_and_reverse_animation_if_hover_ends() plugin, which encapsulates the second snipped.

UPDATE:

As CBroe points out in his comment. A real improvement in elegance might be to make this animation/transition in CSS.

Improve this answer
1
  • Thanks, how would I do it with "animation/transition in CSS". Until now I am only aware to use things like .div:hover {...} to animate stuff within CSS.
    – Fabian Schn.
    Commented May 9, 2017 at 10:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.