2016-08-16 11 views
0

Я хочу сделать тот же отскок, но с jquery not 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

Лучшие Mohamed

+0

Hi Mohamed - что вы пробовали? Stack Overflow - хорошее место для поиска ответов на технические проблемы, с которыми вы сталкиваетесь в ходе задачи, но не для того, чтобы обратиться за помощью, если вы даже не начали задачу. –

+0

Hi Vince, Я пробовал этот код, но это не дало мне такого же эффекта отскакивания: 'code' setInterval (function() { doBounce ($ ('# bounce'), '10px', 500), }, 500); функция doBounce (элемент, расстояние, скорость) { элемент .animate ({MarginTop: '- =' +} расстояние, скорость) .animate ({MarginTop: '+ =' +} расстояние, скорость); } 'code' –

+0

Hi Mohamed; добавление кода полезно, но было бы лучше, если бы вы отредактировали свой вопрос, чтобы включить его там. Если вся информация находится в вопросе, то любой может прочитать ее и легко понять все о проблеме; сложнее понять, должен ли читатель читать комментарии, чтобы найти все. –

ответ

0

Вы должны попробовать

Используйте пример исходного кода, а затем, если вы этого не сделаете. мы можем помочь.

+0

Спасибо, Piara, но я не специалист по jquery, поэтому мне нужен кто-то, кто может помочь сделать мой код ближе к анимации, на которую я сосредоточен. –

+0

@MohamedMasmoudi, вы, вероятно, могли бы попытаться следовать этим 30 дням jquery по пути Джеффри. Это лучшие учебники, которые помогут вам начать работу, и он также показывает всю анимацию и как вы можете работать с ней в JQuery. –