I'm trying to make a div show and then grow to its appropriate size. Here is my code so far:

$(document).ready(function() {
$('#enlarge').css("visibility", "visible").animate({
    height:681, width:467
}, 1000, "linear", function(){alert("all done");});

});

My HTML is simple:

    <div id="enlarge"><span>content here</span></div>

My CSS is even more simple:

#enlarge {
    height:0px;
    width:0px;
    background: url(../img/enlarge.png)no-repeat;
    z-index: 3;
    position:absolute;
    top:-50px;
    left:250px;
    visibility: hidden;
}

I'm trying to make a div show and then grow to its appropriate size. Here is my code so far:

$(document).ready(function() {
$('#enlarge').css("visibility", "visible").animate({
    height:681, width:467
}, 1000, "linear", function(){alert("all done");});

});

My HTML is simple:

    <div id="enlarge"><span>content here</span></div>

My CSS is even more simple:

#enlarge {
    height:0px;
    width:0px;
    background: url(../img/enlarge.png)no-repeat;
    z-index: 3;
    position:absolute;
    top:-50px;
    left:250px;
    visibility: hidden;
}

• javascript
• jquery
• html
• css

3 Answers 3

Here's a Fiddle

<div id="enlarge">
  <span>content here</span>
</div>


#enlarge {
  background: #555;
  height: 0;
  width: 467px;
  z-index: 3;
  position:absolute;
  top:-50px;
  left:250px;
}


$(function() {
  $('#enlarge').animate({ height: '681px' }, 1000, 'linear');
});

and if you want to animate both width & height than

#enlarge {
  background: #555;
  height: 0;
  width: 0;
  z-index: 3;
  position:absolute;
  top:-50px;
  left:250px;
}


$(function() {
  $('#enlarge').animate({ height: '681px', width: '467px' }, 1000, 'linear');
});

$('#enlarge').animate({
    height:681px,
    width:467px
}, 1000);

The .css() call is extraneous. EDIT: thanks for catching the px

You have to use opacity as there is no animation for visible, which is a boolean:

$(document).ready(function() {
    $("#enlarge").animate({"opacity": "1", "height":"700px", "width":"467px"},5000);
});