Question

我正在尝试制作一个div节目，然后发展到合适的尺寸。到目前为止，这是我的代码：

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

}）;

我的HTML很简单：

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

我的CSS更简单：

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

Answer 1

这是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');
});

如果你想要同时设置宽度和宽度的动画。高度

#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');
});

Answer 2

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

.css（）调用是无关紧要的。编辑：感谢您抓住px

Answer 3

你必须使用opacity，因为visible没有动画，这是一个布尔值：

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

在jQuery中显示和增加页面加载动画

3 个答案: