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.