how to animate show a hidden div in jquery?

Question

Dumb question but I can't seem to figure this out.

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

$("e").hide();

then when a user persons a specific action I want the div to animate or slide down gracefully. But on my site the animation just flashes and shoes the hidden div and no fade or slideDown effects 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 animate like this.

$("#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 div.

Answer 2

Instead of:

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

Write this:

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

This will show or hide your DIV. It's 1 line solution.

Answer 3

Use the Toggle function in order to do this.

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