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.

Nope - only jquery library and `jquery.effects.slide.js`, `jquery.effects.core.js` everything else is my own — Josh Boothe, May 10 '13 at 10:21
It would be more helpful to provide a link to the two plugins you mentioned, and recreate your problem on http://jsfiddle.net — Samuel Liew, May 10 '13 at 10:24

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

7

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 10 '13 at 10:28

billyonecan

20,090
8
42
64

Thanks for this! Perfect :) I tried this before with linear, which didnt seem to fix it, I have just tried swing after your suggestion and it is next to perfect so thank you! – Josh Boothe May 10 '13 at 10:34
1

Example has expired :( – Dropout Jul 24 '15 at 11:40
I wonder why its not working for me. The only syntax that is working is `element.hide(200, 'swing', function(){});`. If I try anything else, its not animating anything anymore. Any idea why? – C4d Mar 16 '17 at 18:33

score 0 · Answer 2 · answered May 10 '13 at 10:23

0

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/

answered May 10 '13 at 10:23

Kishan Patel

1,358
10
24

Thanks for the comment, can I use easing then with .hide method? i cant see any references to it on the docs – Josh Boothe May 10 '13 at 10:27
do you want that .. once easing event completed after you want to apply .hide method. Am i right ? – Kishan Patel May 10 '13 at 10:35

score 0 · Answer 3 · answered May 10 '13 at 10:33

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.

Easing with .hide('slide')?

3 Answers3

Here's an example