Easing with .hide('slide')?

Question

Is it possible to have easing with this:

('#sideBar').hide('slide', {direction: 'right' }, 
    800, function(){...});

At the moment it is very jittery as it is moving maybe.. 100 - 500 pixels (depending on content). I have been looking google and most people say to use easing, but when looking at the documentation i cannot see a property for easing.

Answer 1

You can specify the easing property in the options object (the second argument):

$('#sideBar').hide('slide', { direction: 'right', easing: 'easeOutBounce' }, 
    800, function(){...});

Check out the easing documentation

Here's an example

Answer 2

First correct with

 jQUery('#sideBar').hide('slide', {direction: 'right' }, 
 800, function(){...});

http://docs.jquery.com/UI/Effects/Slide

Look on below page

http://docs.jquery.com/UI/Effects/Slide

OR

you can use animate

http://api.jquery.com/animate/

Also you can find easing cheat

For example.

http://gsgd.co.uk/sandbox/jquery/easing/

http://jqueryui.com/resources/demos/effect/easing.html

http://easings.net/

Answer 3

You can download the JQuery easing plugin from http://gsgd.co.uk/sandbox/jquery/easing, which provides smoother animations than the default ones included with jQuery. You can then easily set your global easing animation using the following code:

jQuery.easing.def = "easeInOutExpo";

You can of course choose whichever easing animation you prefer. This will affect all of your jQuery animations on the page, which isn't a bad thing if you're looking for consistency.