2016-08-16 4 views
0

같은 바운스를 만들고 싶지만 css3이 아닌 jquery로 만들고 싶습니다.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

최저 모하메드

+0

안녕하세요, 모하메드 - 지금까지 해보신 것은 무엇입니까? 스택 오버플로는 작업 과정에서 직면 한 기술 문제에 대한 답변을 찾을 수있는 좋은 곳이지만 아직 작업을 시작하지 않은 경우 도움을 요청할 수있는 좋은 곳은 아닙니다. –

+0

안녕 빈스, 나는이 코드를 시도했지만 튀는 것과 같은 효과를주지 못했다. setInterval (function() { doBounce ($ ('# bounce'), '10px', 500), }, 500); 함수 doBounce (요소, 거리, 속도) { 소자 .animate ({marginTop '- ='+ 거리} 속도) .animate ({marginTop '+ ='+ 거리} 속도); }'code' –

+0

안녕하세요, Mohamed; 코드를 추가하는 것이 유용하지만, 질문을 편집하여 포함 시키면 더 좋을 것입니다. 모든 정보가 문제가된다면 누구든지이 정보를 읽고 문제에 대한 모든 것을 쉽게 이해할 수 있습니다. 독자가 모든 것을 찾기 위해 주석을 검토해야하는지 이해하는 것이 더 어렵습니다. –

답변

0

시도해보십시오

소스 코드 예제를 사용하고 수행 할 수없는 경우를 사용하십시오. 우리가 도와 줄 수 있어요.

+0

Piara, 고맙지 만 jquery specialist가 아니기 때문에 내가 집중하는 애니메이션에 더 가까운 코드를 만들 수있는 사람을 원했습니다. –

+0

@MohamedMasmoudi 당신은 아마 제프리 방식으로 jquery에 그 30 일을 시도하고 따라 할 수 있습니다. 이것이 최고의 튜토리얼입니다. Jquery에서 모든 애니메이션과 그 작업 방법을 보여줍니다. –