jqueryでこのバウンス効果を作り出す方法は？

Question

私は同じバウンスを作っていますが、css3ではなくjqueryで作っています。

私はこの例でコードを試しましたが、アニメーションは私が探しているものと全く同じではないようです。

これは私がしようとした例である：

setInterval(function(){ 
 
    doBounce($('#bounce'), '10px', 500); 
 
}, 500); 
 
    
 

 
function doBounce(element, distance, speed) { 
 
    element 
 
    .animate({marginTop: '-='+distance},speed) 
 
    .animate({marginTop: '+='+distance},speed); 
 
}

#bounce { 
 
    background-color: red; 
 
    cursor: pointer; 
 
    display: block; 
 
    margin-top: 50px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a id="bounce">Button</a>

そして、これは私がバウンス矢印として探しているものです：enter link description here

ベスト モハメド

Answer 1

お試しください

ソースコードの例を使用してください。お手伝いします。