Question

我正在使用这个jQuery代码为两个div设置动画，当页面加载时，div已经存在。然后它开始动画。如何在页面加载时隐藏div，并在几秒钟后依次开始播放此动画。

这是我期待的过程

（页面加载 - ＆gt;几秒钟后 - > #float img加载 - ＆gt;几秒后 - > #floatbubble加载

<script>
    $(function(){
        var effect_selector = "#float img";
        $(effect_selector).height(0);
        $(effect_selector).width(0);
        $(effect_selector).animate({ width: 125, height : 125 },"slow",function(){
            $(effect_selector).removeAttr("style");

            //Another effect
            var effect_selector = "#floatbubble";
            $(effect_selector).height(0);
            $(effect_selector).width(0);
            $(effect_selector).animate({ width: 125, height : 125 },"slow",function(){
                $(effect_selector).removeAttr("style");
            });
        });
    });
</script>

Jsfiddle DEMO

Answer 1

我相信这会做你想要的：

<script>
    $(function(){
      var effect_selector = "#float img";
      var effect_selector2 = "#floatbubble";
      $(effect_selector).css({'height':'0px','width':'0px'});
      $(effect_selector2).css({'height':'0px','width':'0px'});
      $(window).load(function(){
        $(effect_selector).delay(2000).animate({ width: '125px', height : '125px' },"slow",function(){
            $(effect_selector).removeAttr("style");

            //Another effect
            $(effect_selector2).delay(2000).animate({ width: '125px', height : '125px' },"slow",function(){
                $(effect_selector2).removeAttr("style");
            });
        });
      });
    });
</script>

Answer 2

<script>

$(function () {
    setTimeout(function functionName() {
        firstAnimation();
    }, 2000)
});

function firstAnimation() {
    var effect_selector = "#float img";
    $(effect_selector).height(0);
    $(effect_selector).width(0);
    $(effect_selector).animate({ width: 125, height: 125 }, "slow", function () {
        $(effect_selector).removeAttr("style");

        setTimeout(function functionName() {
            secondAnimation();
        }, 2000)
    });
}
function secondAnimation() {
    var effect_selector = "#floatbubble";
    $(effect_selector).height(0);
    $(effect_selector).width(0);
    $(effect_selector).animate({ width: 125, height: 125 }, "slow", function () {
        $(effect_selector).removeAttr("style");
    });
}

这会对你有所帮助

jQuery函数在时间间隔内

2 个答案: