javascript 在 jQuery 中的页面加载时显示和增长动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18772763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show and grow animation on page load in jQuery
提问by Amidude
I'm trying to make a div show and then grow to its appropriate size. Here is my code so far:
我正在尝试制作一个 div 节目，然后增长到合适的大小。到目前为止，这是我的代码：
$(document).ready(function() {
$('#enlarge').css("visibility", "visible").animate({
height:681, width:467
}, 1000, "linear", function(){alert("all done");});
});
});
My HTML is simple:
我的 HTML 很简单：
<div id="enlarge"><span>content here</span></div>
My CSS is even more simple:
我的 CSS 更简单：
#enlarge {
height:0px;
width:0px;
background: url(../img/enlarge.png)no-repeat;
z-index: 3;
position:absolute;
top:-50px;
left:250px;
visibility: hidden;
}
回答by mdesdev
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');
});
回答by JTravakh
$('#enlarge').animate({
height:681px,
width:467px
}, 1000);
The .css() call is extraneous. EDIT: thanks for catching the px
.css() 调用是无关紧要的。编辑：感谢您捕捉 px
回答by JVE999
You have to use opacityas there is no animation for visible, which is a boolean:
您必须使用，opacity因为 没有动画visible，它是一个布尔值：
$(document).ready(function() {
$("#enlarge").animate({"opacity": "1", "height":"700px", "width":"467px"},5000);
});
