How to animate show hidden div in jquery?

Question

Dumb question, but I can’t figure it out.

I have a div and hide it when the page loads like this

$("e").hide(); 

then when the user takes a specific action, I want the div to animate or smoothly move down. But on my site, the animation just flashes and hides a hidden div, and no fade or slideDown occur.

I use

 $("#e").hide(); $("#p").change(function() { if ($("#p").val() === 'Married') { $("#e").slideDown(500); } else { $("#e").slideUp(500); } }); 

Answer 1

You can use animate to do the same thing as animate .

 $("#e").hide(); $("#p").change(function(){ if($("#p").val() === 'Married'){ $("#e").animate( { "opacity": "show", top:"100"} , 500 ); }else{ $("#e").animate( { "opacity": "show", top:"150"} , 5000 ); } }); 

To slide up and down, you can play with height and width of affairs.

Answer 2

To do this, use the Toggle function.

 $("#p").toggle(function(){ // Your toggle code here }); 

Answer 3

Instead:

  { $("#e").slideDown(500); } else { $("#e").slideUp(500); } 

Write this:

 $("#e").toggle(500); 

This will display or hide your DIV. This is a one line solution.

Answer 4

You can use Animate Animate with a simple example:

 $("#p").animate({ opacity: 0 }, 600).prependTo($list); 

where list is the parent

and it works great with all browsers

Answer 5

Why not just $("#e").fadeOut(250); or something else?