how to animate show a hidden div in jquery?

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开发者_JAVA百科 use

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

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.

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.

Use the Toggle function in order to do this.

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

You can use Animate Animate simple example:

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

where list is the parent

and it works fine with all browsers

I realise this is now years old, but having arrived here looking for the same information, you can now use a duration which does the sliding animation for you. For example:

$("#p").change(function() {
  $("#e").toggle(500);
});

Lots more options available.

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