jquery - 使用 jQuery 为 DIV 设置动画

Question

我试图在页面加载后为 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 工作，叹息。

Answer 1

这display: none;也是您的代码无效的原因。

请检查这个 jsFiddle 示例，它将解决问题。

http://jsfiddle.net/af2yj/

$(document).ready(function() {
    $(".graph").show();
    $('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'});
});
​

在您的示例中，您有未使用的 }); 并且您没有使用分号关闭 animate() 函数。

Answer 2

$(".graph").show();

你必须 .show(); 首先... 那是因为 display: none; 隐藏它，你不显示它......

Answer 3

jQuery 不知道让你的元素完全可见。您告诉它使用 CSS 为您明确告诉浏览器隐藏的元素的宽度设置动画。因此，您需要首先显示元素，然后对其进行动画处理：

$(function(){
    $("#foo")
        .show()
        .animate(
            { width: "40%" }, 
            { duration: 600, easing: 'easeOutBounce' }
        );    
});

小提琴：http: //jsfiddle.net/kjCnX/1/