时间间隔中的jQuery函数

Question

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

这是我期望的过程

（页面加载->几秒钟后-> #float img加载->几秒钟后-> #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演示

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");
    });
}

这对你有帮助