Change the jquery show()/hide() animation?

Question

By default if you specify a speed jquery adds a weird looking animation where it expands from the left end corner. I want it to just slide down. Is there a way to do that without importing something else like jquery UI ?

I'm looking something in the lines of :

$("test").show('slow', {animation:'slide'})

If there's no way, then what would be the lightest solution to do this?

Thanks

Answer 1

There are the slideDown, slideUp, and slideToggle functions native to jquery 1.3+, and they work quite nicely...

https://api.jquery.com/category/effects/

You can use slideDown just like this:

$("test").slideDown("slow");

And if you want to combine effects and really go nuts I'd take a look at the animate function which allows you to specify a number of CSS properties to shape tween or morph into. Pretty fancy stuff, that.

Answer 2

Use slidedown():

$("test").slideDown("slow");

Answer 3

You can also use a fadeIn/FadeOut Combo, too....

$('.test').bind('click', function(){
    $('.div1').fadeIn(500); 
    $('.div2').fadeOut(500);
    $('.div3').fadeOut(500);
    return false;
});