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

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

这是一个小提琴

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