同时运行单独的子序列淡入淡出组

时间:2014-07-22 17:36:18

标签: javascript jquery

我基本上想要在其组件中按顺序加载大量图形,但每个图形同时执行此操作。目前它同时加载在基础($ graphName)中,但其余的项都是相对于下载的元素。我猜我需要命名这个但是我如何将它集成到这个函数中?

    $graphName.fadeIn(500, function(){
        $graphaxes.each(function(index) {
            $(this).delay(500*index).fadeIn(800, function(){
                $(".circle").each(function(index) {
                    $(this).delay(500*index).fadeIn(800);
                });
            });
        });
    });

HTML

<div class="graph">
            <div class="x-axis">
                <span>Effectiveness</span> 
            </div>
            <div class="y-axis">
                <span>Cost</span>
            </div>
            <ul class="name brand-awareness">
                <li class="circle bk top"></li>
                <li class="circle bk bottom"></li>

                <li class="circle one"><p>INCENTIVATED</p></li>
                <li class="circle two"><p>RTB</p></li>
                <li class="circle three"><p>AD <br> NETWORK</p></li>
                <li class="circle four"><p>SMS</p></li>
                <li class="circle five"><p>WIFI</p></li>
                <li class="circle six"><p>SOCIAL</p></li>
                <li class="circle seven"><p>DIRECT/ <br> PREMIUM</p></li>
                <li class="circle eight"><p>VIDEO/ <br> RICH</p></li>
            </ul>
        </div>

1 个答案:

答案 0 :(得分:0)

尝试将fadeIn函数直接应用于jQuery结果(不在jQuery.each中):

$graphName.fadeIn(500, function() {
    $graphaxes.delay(500*index).fadeIn(800, function() {
        $(".circle").delay(500*index).fadeIn(800);
    });
});