CODEWITHSUNDEEP
javascriptjqueryanimation
marcgg
marcgg

Reputation: 66525

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

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

Upvotes: 43

Views: 127970

Answers (4)

Thanh Tuan
Thanh Tuan

Reputation: 11

$(".test").on("click", (e) => { $(e.target.slideToggle("slow"); });

Upvotes: 1

Steve Wortham
Steve Wortham

Reputation: 22260

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.

Upvotes: 76

beggs
beggs

Reputation: 4195

Use slidedown():

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

Upvotes: 16

Matthew
Matthew

Reputation: 101

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

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

Upvotes: 10

Related Questions