Jquery Help?: Add easing to .slideUp() and .slideDown()?

[exodusnicholas]

.slideDown() only accepts duration and callback, but not easing.

now, you can do this: 
.slideDown({queue:false, duration: 600, easing: 'easeInOutQuad'}) 
, which will work, but I need to do this:
        $('.chapters_list').slideDown({queue:false, duration: 700, easing: 'easeInOutQuart'}, function() {

something($('stuff'));

});

which doesn't work. If I were to replace the code in the {} with 500 then it works again.
One way that i've discovered to get around this is to use .animate() like this:
        $('.chapters_list').animate({opacity: 'toggle'}}, function() {

something($('stuff'));

});

but using this method doesn't account for padding and margin on the element sliding.. So it has that little jump, which looks bad...
i've made multiple posts on stackoverflow, and nobody has an answer. I do not want to define the height in the jquery, or predetermine the height of the element sliding.
Any ideas? I'm still pretty new to Jquery and don't know how to make .animate() account for the elements padding and margin... i don't know... any help is much appreciated.

		
	

[shagzdesign]

http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/

A lot of people will suggest using a fixed height, but if you check out the link above you’ll see that you shouldn’t have to and you can get rid of the jump. The article doesn’t address your specific situation, but it does address the bug in jquery that causes the jump.

[Chris Coyier]

There really just isn’t any avoiding the jump if you have padding on the element which is using slideToggle. The deal is that the height is the only property that is animated, and then once it reaches zero it gets hidden, and the padding with it, causing the jump.

Check this out:
http://jqueryfordesigners.com/animation-jump-quick-tip/

Remy’s answer is to using the sliding on a parent that doesn’t have padding.

It might be fun to explore animating the top and bottom padding simultaneously with the height. Sounds like a fun little plugin idea =)

[Chris Coyier]

Wait wait wait.

Here I go running my mouth again.

The latest jQuery’s have this fixed, margin/padding/height all animate simultaneously.

See: http://jsbin.com/aruci/edit

Also, make sure to use position: relative; on the parent element, that’s known to fix some issues.

[Author]

Posts