CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kenny
kenny

Reputation: 444

Make jQuery animate loop

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!

Upvotes: 0

Views: 603

Answers (2)

mmativ
mmativ

Reputation: 1414

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>

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

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/

Upvotes: 2

Related Questions