Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use easing in the jQuery plugin jQuery.ScrollTo?

Tags:

jquery

easing

The website only mentions the easing option:

# easing: Name of the easing equation.

But there's no example.

How to use this feature?

like image 615
alexchenco Avatar asked Jan 17 '11 06:01

alexchenco


2 Answers

The examples are here: http://demos.flesler.com/jquery/scrollTo/

Use like so:

$.scrollTo( '#options-examples', 800, {easing:'easeOutQuad'} );

These easing functions don't come built in though. You can use the jQuery Easing plugin. This then supplies the following easing functions:

  • jswing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
like image 98
David Tang Avatar answered Nov 14 '22 06:11

David Tang


You can find the default usage here: http://gsgd.co.uk/sandbox/jquery/easing/

Here is an example of 'easeOutQuad':

function (){
 jQuery.easing.def = 'easeOutQuad';

 $('#options-examples').on('click','a', function() {
   $('#another-option-examples').slideToggle(1000);
   return false;
 });
}
like image 42
Adi Nugraha Y Avatar answered Nov 14 '22 07:11

Adi Nugraha Y