CODEWITHSUNDEEP
jquery
Eli
Eli

Reputation: 4359

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 use

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

Upvotes: 9

Views: 47082

Answers (6)

Ralph Bolton
Ralph Bolton

Reputation: 854

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.

Upvotes: 1

Vivek
Vivek

Reputation: 11028

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.

Upvotes: 15

Enriqe
Enriqe

Reputation: 557

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.

Upvotes: 9

Barrie Reader
Barrie Reader

Reputation: 10713

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

Upvotes: -1

Hiyasat
Hiyasat

Reputation: 8926

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

Upvotes: 1

Neil Knight
Neil Knight

Reputation: 48597

Use the Toggle function in order to do this.

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

Upvotes: 5

Related Questions