CODEWITHSUNDEEP
javascriptjqueryhtmljquery-animate
Nick Bewley
Nick Bewley

Reputation: 9289

Animate and Expand div

Here's my problem: I want to hide content behind a button, then when the button is pushed I want the content wrapper to expand horizontally and vertically to reveal the hidden content. I have figured out how to animate the div vertically, but horizontally am having problems. I want the content wrapper to expand from 300px wide at start to 900 px wide later.

The javascript holder is assigned to panel

$(document).ready(function(){
$(".btn-slide").click(function(){
 $('#panel').animate({
opacity: 0.25,
height: 'toggle',
}, 1000, function() {
// Animation complete.
});});   
});

I want the wrapper width to expand from 300px to 900px. Currently, the wrapper expands vertically properly, but the width does not. The wrapper css is set to:

#wrapper {
width: 300px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}

Thanks for any suggestions.

Upvotes: 0

Views: 1485

Answers (2)

Marshall Mathews
Marshall Mathews

Reputation: 357

If you want to expand div you could do

$("#div").css('width', '900');

Upvotes: 0

SLaks
SLaks

Reputation: 887225

You need to add width: 900 to the animation property list.

Upvotes: 1

Related Questions