Make jQuery animate loop

Question

I know there are other and more preferred methods, but I'm trying to give a div img a bounce effect using jQuery.

I'm trying to loop

 $('#downarrow').animate({bottom:'4px'});
  $('#downarrow').animate({bottom:'0px'});

Any help would be awesome. Thanks!

Wouldnt this be easier in css keyframes animation?

Shrikantha Budya
– Shrikantha Budya

2016-06-21 03:02:16 +00:00
Commented Jun 21, 2016 at 3:02 — Shrikantha Budya
– Shrikantha Budya, Commented Jun 21, 2016 at 3:02

Derek 朕會功夫 · Accepted Answer · 2016-06-21 02:58:37Z

2

One very simple solution:

function bounceUp(){
    $('#downarrow').animate({bottom:'4px'}, 1000, bounceDown);
}
function bounceDown(){
    $('#downarrow').animate({bottom:'0px'}, 1000, bounceUp);
}

bounceUp();

An example: https://jsfiddle.net/DerekL/nd8kf61s/

edited Jun 21, 2016 at 2:58

answered Jun 21, 2016 at 2:55

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kenny Over a year ago

Just what I needed. I'll accept this in 8 minutes! Thank you!

mmativ · Accepted Answer · 2016-06-21 03:04:35Z

1

You can use jQuery to addClass or toggleClass. But this approach using the css animation.

$(document).ready(function() {
  $('.arrow').toggleClass('upp');
});

.arrow {
  position: relative;
  bottom: 0px;
}
.upp {
  -webkit-animation: mymove 1.5s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 1.5s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px
  }
}
@keyframes mymove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
  hey
</div>

answered Jun 21, 2016 at 3:04

mmativ

1,41415 silver badges26 bronze badges

Collectives™ on Stack Overflow

Make jQuery animate loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related