CODEWITHSUNDEEP
javascriptjquery
Ericb
Ericb

Reputation: 11

Why does jQuery animation only runs once

I am able to get my animation to complete only once without reloading the page.

There is a similar question about the same issue, but I can not seem to get it to re-fire on mouseenter. Thanks in advance.

$(document).ready(function() {
  $('#root').mouseenter(function() {
    $(this).animate({
      'right': '200'
    });
  });
  $('#root').mouseleave(function() {
    $(this).animate({
      'left': '200'
    });
  });
});
#root {
  height: 100px;
  width: 100px;
  background-color: darkblue;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root"></div>

Upvotes: 1

Views: 66

Answers (3)

user5380448
user5380448

Reputation:

Instead of using 'left': '200' use 'right': '0'.

 <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>My Practice Page</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="master.js"></script>

<style>
#root {
    height: 100px;
    width: 100px;
    background-color: darkblue;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>
    </head>

    <body>
        <div id="root">

        </div>
<script>
$(document).ready(function() {
    $('#root').mouseenter(function() {
 		$('#root').animate({
            'right': '200'
        });
    });
    $('#root').mouseleave(function() {
        $('#root').animate({
            'right': '0'
        });
    });
});
</script>

</body>

</html>

This works because you are animating two different things.

Upvotes: 0

Soviut
Soviut

Reputation: 91714

You're animating two different properties, right and left. Those are aren't the direction they're travelling, they represent how far offset from the left and right sides of their parent container they are.

The way you have it now, you're applying those two properties and never removing them. If you're trying to make the element slide out of the way like a drawer, you should only be animating the left property, adding 200px to it on mouseenter and setting left back to 0px on mouseleave. If you're trying to make the element appear to grow, you should animate width or right instead, but follow the same resetting procedure on mouseleave.

HOWEVER! an easier way to achieve what you want it to just do it with pure CSS transitions. These will animate more smoothly, are often GPU accelerated, have different easing curves and will reset properly even if the mouse leaves before the mouse enter animation is complete.

.target {
  padding: 10px;
  background: cornflowerblue;
  width: 50%;
  
  /* the transition does all the work */
  transition: transform 500ms ease-in-out;
}

.target:hover {
  /* use a transform for easier position movement */
  transform: translateX(200px);
}
<div class="target">Hover over me</div>

Upvotes: 3

M -
M -

Reputation: 28497

Because left and right positioning don't always override each other. You need to remove one before the other one can be observed:

$('#root').mouseenter(function() {
    $(this).css( "left", "" );
    $(this).animate({
        'right': '200'
    });
});
$('#root').mouseleave(function() {
    $(this).css( "right", "" );
    $(this).animate({
        'left': '200'
    });
});

Or if you simply want to return to its original position, you could just return the right value back to 0:

$('#root').mouseenter(function() {
    $(this).animate({
        'right': '200'
    });
});
$('#root').mouseleave(function() {
    $(this).animate({
        'right': '0'
    });
});

Upvotes: 1

Related Questions