CODEWITHSUNDEEP
jquery
Erma Isabel
Erma Isabel

Reputation: 2177

Show hidden div with animation

I am trying to show hidden div using animation,

The code i tried is,

$("#seconddiv").hide();

$("#seconddiv2").click(function(){
    $("#seconddiv").animate( { "opacity": "show", "top":"1000px"} , "slow" );  
});

Here div is appearing from no where. But i want to, make div to appear as if it is moving down from top.

The code not working is,

$("#seconddiv2").click(function(){
    $("#seconddiv").show();
    $("#seconddiv").animate({top:'250px'},"slow");
});

Since the div is hidden animate function is not working.

What changes do i need to make it work? please help Thanks

Upvotes: 0

Views: 141

Answers (2)

karthi
karthi

Reputation: 887

$("#seconddiv2").click(function() {      

   $("#seconddiv").animate({"top": "-=50px"}, "slow");   

});

Upvotes: 0

Jose Rui Santos
Jose Rui Santos

Reputation: 15309

You need to give your #seconddiv a relative or absolute positioning.

#seconddiv {
    position: relative;
}

http://jsfiddle.net/cjtWX/1/

Changing the top on static positioned elements has not effect.

Upvotes: 2

Related Questions