使用jQuery为DIV设置动画
使用jQuery为DIV设置动画
提问于 2012-07-23 21:20:35
我试图在页面加载后为div的宽度添加动画，但我无法让它工作。
基本上div被设置为display:none，并且我想在页面准备好之后为它的宽度设置动画。
<script>
$(document).ready(function() {
$('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>
.graph {width: 400px;
height: 250px;
position: absolute;
background-image: url(../images/roll.png);
display: none;
}我永远不能让jquery工作，叹息。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-07-23 21:27:54
jQuery不知道让你的元素单独可见。您告诉它使用CSS对显式地告诉浏览器隐藏的元素的宽度进行动画处理。因此，您需要首先显示元素，然后为其设置动画：
$(function(){
$("#foo")
.show()
.animate(
{ width: "40%" },
{ duration: 600, easing: 'easeOutBounce' }
);
});小提琴：http://jsfiddle.net/kjCnX/1/
Stack Overflow用户
发布于 2012-07-23 21:24:26
这就是display: none;的原因，你的代码也是无效的。
请检查此jsFiddle示例，它将解决此问题。
http://jsfiddle.net/af2yj/
$(document).ready(function() {
$(".graph").show();
$('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'});
});
在您的示例中，您有未使用的})；并且您没有用分号结束animate()函数。
Stack Overflow用户
发布于 2012-07-23 21:25:22
$(".graph").show();您必须使用.show()；它首先...这是因为display: none；隐藏了它，而您没有显示它...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11613368
复制相关文章
相似问题
腾讯云开发者
