39

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

marcgg
  • 65,020
  • 52
  • 178
  • 231

4 Answers4

74

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.

Augusto
  • 2,125
  • 18
  • 27
Steve Wortham
  • 21,740
  • 5
  • 68
  • 90
15

Use slidedown():

$("test").slideDown("slow");
aksu
  • 5,221
  • 5
  • 24
  • 39
beggs
  • 4,185
  • 2
  • 30
  • 30
9

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

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

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

Thanh Tuan
  • 11
  • 1
  • 1
    Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Aug 28 '23 at 09:25
  • Good answer :) But it's not easy to make out what the solution is. I'd suggest: 1) better formatting of code (use triple backticks to have multiline code formatting: https://meta.stackoverflow.com/a/251362/3705191 (also see image: https://i.stack.imgur.com/yvfn9.png)), 2) write a short explanation of the solution (that you're using slideToggle()) and what it does (that slideToggle toggles between show/hide with animation, unlike slideDown, which is one-way), and 3) maybe provide a link to relevant documentation for the answer (like linking to slideToggle: https://api.jquery.com/slideToggle/) – Prid Aug 28 '23 at 17:21