Search jQuery

jQuery Forum

How to add/change the ease method to a SlideUp() or SlideDown() function

in Getting Started • 8 years ago

Hi, I'm new to the forum. I've taken time to search through the forum on the look-out for a similar topic, but have not found one. I would like to add or change the slide effect by adding a easeInExpo to a SlideUp() or SlideDown() function

jQuery(function( $ ){
var container = $( "#container" );
$( "a" ).click(function( event ){
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 500 )
} else {
container.slideDown( 500 );
}
}
);
});
</script>

I tried to add the easing by doing this

container.slideUp( "slow", "easeInExpo" )
} else {
container.slideDown( "slow", "easeInExpo" );

but it did not work. A workaround to this was using a plugin

Using that plugin, I can do things like

$ ( container ). slideUp ({

    duration: 500, 
    easing: easeInExpo, 
    complete: callback});

Easy, but this does not help me understand how it works.

I think I may need to use slideToggle() because slide Up and Down may have their own default easing. I need help to achieve this easeInExpo effect when the container div pops up and down.

How do I achieve this?

See my jQuery example here

Thank-you.