이 jQuery 애니메이션에 가속도를 어떻게 추가 할 수 있습니까?

Question

<div> (more info)을 bottom:-100px에서 bottom:0px으로 움직일 수있었습니다.

다른 속도로하고 싶습니다. 애니메이션의 시작 부분에서 조금 더 느리게 시작한 다음 애니메이션이 끝날 때까지 더 빨라집니다.

이는 모습입니다 :

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, function() { 
        $('#bannerFijo').animate({ bottom: '0px' }, 100); 
}); 

그러나 나는 다른 방법 있도록 속도 변화 점진적가 있어야합니다 확신합니다.

-edit-

애니메이션 버전이 : SuperPaperSam에

$('#bannerFijo').animate({ bottom: '0px' }, 1200, function() { 
        $('#bannerFijo').animate({ bottom: '-15px' }, 300,function() { 
         $('#bannerFijo').animate({ bottom: '-5px' }, 150,function() { 
          $('#bannerFijo').animate({ bottom: '-10px' }, 100,function() { 
           $('#bannerFijo').animate({ bottom: '0px' }, 50); 
            return true; 
           }); 
          }); 
        }); 
     }); 

-Edit- 덕분에 나는이 솔루션 ('없음'플러그인)

$.easing.easeOutBounce = function (x, t, b, c, d) { 
      if ((t/=d) < (1/2.75)) { 
       return c*(7.5625*t*t) + b; 
      } else if (t < (2/2.75)) { 
       return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
      } else if (t < (2.5/2.75)) { 
       return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
      } else { 
       return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
      } 

    } 

그래서 애니메이션에 도착 함수는 다음과 같습니다.

function mostrar_banner(){ 

     $('#bannerFijo').animate({ bottom: '+=110px' }, 2000, 'easeOutBounce'); 
} 

Answer 1

Jquery는 여유를 가지고 있으므로 easing plugin을 확인하십시오.

그것은이 (테스트되지 않은)과 같을 것이다

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, nameofeasing, function() { 
       $('#bannerFijo').animate({ bottom: '0px' }, 100, nameofeasing); 
}); 

편집 : 난 당신이 easing?

또 다른 아이디어를 의미 http://jsfiddle.net/EbJBn/2/

Answer 2

플러그인 완화를 사용하지 않는이의 테스트 페이지를 만든 왜 귀하의 자바 스크립트 파일에 easing 코드를 가지고 있지 않습니까? 내 걸릴 수 있습니다 JsFiddle 플러그인 크기가 너를 괴롭히는 경우 원하는 여유를 선택하고 다른 사람을자를 수 있습니다. 희망이 도움이됩니다.

Answer 3

플러그인 없이도 jQuery에서 모든 애니메이션 "easing"기능을 사용할 수 있습니다. 그것은

Looking for jQuery easing functions without using a plugin

이 스레드는 위의 기능 in the accepted answer뿐만 아니라 a link to more third party easing functions (2과를 다운로드합니다 해당 페이지의 3 링크를 완화 JQuery와를 포함

... 내가 몇 달 전에 게시이 질문에 자세히 설명 있어요 함수).

at the demos here을 보면 easeInCirc이 맞는 것 같습니다.

수동

$.easing.easeInCirc = function (x, t, b, c, d) { 
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 
} 

그런 다음 당신은 단순히 그냥 duration 매개 변수 다음에 배치하여 기존 jQuery를 animate() 기능에서 호출 할 것입니다 ... 당신의 <script>에 특정 완화 기능 (들)을 추가합니다.

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, 'easeInCirc', function() { 
       $('#bannerFijo').animate({ bottom: '0px' }, 100, 'easeInCirc'); 
}); 

Here is a JSFiddle with the animate() function slowed for illustration.