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（）;它首先...因为显示：无;隐藏它，你没有显示它......

Answer 3

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

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

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

使用jQuery动画DIV

3 个答案: