jquery에서 애니메이션 효과로 이징 효과를 추가하는 방법은 무엇입니까? 그래서 난 내가 잘못하고 me.am 작동하지 않습니다이</p> <pre><code>$('#slider').stop().animate({"margin-right": '0'}, 'slow','easeOutBounce'); </code></pre> <p><strong>easeOutBounce</strong> 같은 시도

Question

나는 사업부 애니메이션입니다하지만 난 그 애니메이션에 어떤 영향을주고 싶습니다? 그러나 그것 이외의 모든 작동합니다. 내가 어떻게 애니메이션 바운스 효과를 얻을 효과를

를 사용하는 경우

는 또한 여기에, 심지어 첫 번째 줄의 애니메이션 기능이 작동하지를 아래

$('#slider').stop().animate({"margin-right": '0'}); 
$('#slider').effect("bounce", "slow"); 

하지만 같은 JQuery와 효과를 시도?

Answer 1

easeOutBounce 효과는 jquery UI 플러그인의 일부입니다.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

Answer 2

HTML 페이지

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

을에서 다음 라이브러리가 더에 jquery UI

Answer 3

알아 포함 :

당신은 다른 플러그인을 너무 JQuery와 UI를 포함, 또는 찾을 수있다 대답은 받아 들여졌지만 jQuery UI는 단지 증가 된 이징 함수에 비해 너무 부피가 크다. https://github.com/ai/easings.net에서 더 작은 easings.net 스크립트를 사용하는 것이 좋습니다. jQuery의 animate()를 호출하기 전에 기본 이징 함수를 설정하면됩니다 (예제 참조). animate() 메서드에서 easing 매개 변수를 제외합니다.

jQuery.easing.def = 'easeOutBounce'; 
 

 
$('#slider').animate({"margin-left": '200'}, 'slow');

#slider { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:#ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
 

 
<div id="slider"></div>