Machen Sie jQuery animierte Schleife

Question

Ich weiß, es gibt andere und mehr bevorzugte Methoden, aber ich versuche, einen div img einen Bounce-Effekt mit jQuery geben.

Ich bin eine Schleife versucht

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

Jede Hilfe wäre genial. Vielen Dank!

Answer 1

Eine sehr einfache Lösung:

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

bounceUp(); 

Ein Beispiel: https://jsfiddle.net/DerekL/nd8kf61s/

Answer 2

Sie jQuery addClass oder toggleClass verwenden können. Aber dieser Ansatz verwendet die 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>