javascript - 时间间隔中的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 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>