how to animate show a hidden div in jquery?

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
});