如何使jQuery的這種反彈效應？

我想做出同樣的反彈，但與jQuery不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

最佳穆罕默德

來源

2016-08-16 Mohamed Masmoudi

嗨穆罕默德 - 你到目前爲止嘗試過什麼？堆棧溢出是一個很好的地方，可以在任務過程中找到遇到的技術問題的答案，但如果你還沒有開始任務，那麼不是尋求幫助的好地方。 –

嗨文斯，我試過這個代碼，但它沒有給我彈跳的相同效果： '代碼' setInterval（function（）{ doBounce（$（'＃bounce'），'10px'， 500）; }，500）; 功能doBounce（元件，距離，速度）{ 元件 .animate（{marginTop： ' - =' +距離}，速度） .animate（{marginTop： '+ =' +距離}，速度）; }'code' –

Hi Mohamed;添加代碼很有用，但如果您編輯問題以將其包含在其中，則會更好。如果所有信息都存在於問題中，那麼任何人都可以閱讀並輕鬆理解有關該問題的所有信息;如果讀者必須通過評論來查找所有內容，則很難理解。 –

您必須嘗試

使用源代碼示例，然後如果您無法執行此操作。我們可以幫助。

來源

2016-08-16 12:29:47

謝謝Piara，但我不是jQuery專家，這就是爲什麼我想要一個能夠幫助我的代碼更貼近我關注的動畫的人。 –

@MohamedMasmoudi你可以嘗試並按照Jeffrey的方式跟蹤那30天的jquery。這是讓你開始的最好的教程，他還展示了所有的動畫以及如何在Jquery中使用這些動畫。 –

如何使jQuery的這種反彈效應？

回答

相關問題