使jQuery的動畫循環

Question

我知道還有其他更喜歡的方法，但我想給一個div img使用jQuery的反彈效果。

我試圖環

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

任何幫助將是真棒。謝謝！

Answer 1

一個非常簡單的解決辦法：

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

bounceUp(); 

一個例子：https://jsfiddle.net/DerekL/nd8kf61s/

Answer 2

您可以使用jQuery addClass或toggleClass。但是這種方法使用了css動畫。

$(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>