Question

我在我的页面上创建了无限量的div，我需要它们逐个显示。也许每秒都会消失并滚动到这个div。无论我做什么，所有的div都同时出现。而且我无法滚动到淡入淡出的区域。谢谢

＆＃13;

// Using multiple unit types within one animation.



        $(document).ready(function() {

    var divs = $('div[id^="gm"]');

    //alert(divs.length);
    for(var i = 0; i < divs.length; i++){
    var thisDiv = divs[i]; // element

    var $thisDiv = $(divs[i]); // jquery object


             //animate($thisDiv);
        //show($thisDiv, divs.length * 300);
        //$thisDiv.delay(600)
        setTimeout(
        $($thisDiv).slideUp( 3000 ).delay( 800 ).fadeIn( 4000 ), 300);

        }

  
		})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-warning">
                <div class="panel-heading">Fight Stats</div>
            </div>

            
            <div class="panel panel-info">
                <div class="panel-heading"><span class="glyphicon glyphicon-flash "></span>ROUND 1</div>
            </div>

            <div class="panel-body">
                <div style="display: none" id="gmround1">

                    <div style="display: none" id="gmplayer1round1">
                        Player 1 casts a fireball... <span class="fa fa-magic"></span><br>

                        
                        hits Player 2 with <span class="text-danger">40 </span> damage!
                        
                        <em>(with a roll of 73)</em>
                        <br>
                        
                    </div>

                    <div style="display: none" id="gmplayer2round1">


                        
                        Player 2 swings his hammer...<span class="fa fa-gavel"></span><br>
                        
                        <strong>MISSES! </strong>
                        
                        <em>(with a roll of 16)</em>
                        <br>

                        
                        
                    </div>
                </div>

            <div class="panel panel-warning" style="display: none" id="gmstatus1">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <strong><i class="text-primary">Player 1</i></strong>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="750" aria-valuemin="0" aria-valuemax="750"  style="width:100%;">
                        <span>750 / 750</span>
                        </div>
                     </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
                <strong><i class="text-warning ">Player 2</i></strong>
                    <div class="progress">

                        <div class="progress-bar progress-bar-warning progress-bar-striped active pull-right" role="progressbar" aria-valuenow="710" aria-valuemin="0" aria-valuemax="750"  style="width:94.6666666667%;">
                        <span>710 / 750</span>
                        </div>
                    </div>
                </div>

            </div>

            </div>



        
            <div class="panel panel-info">
                <div class="panel-heading"><span class="glyphicon glyphicon-flash "></span>ROUND 2</div>
            </div>

            <div class="panel-body">
                <div style="display: none" id="gmround2">

                    <div style="display: none" id="gmplayer1round2">
                        Player 1 casts a fireball... <span class="fa fa-magic"></span><br>

                        
                        <strong>MISSES!</strong>
                        
                        <em>(with a roll of 66)</em>
                        <br>
                        
                    </div>

                    <div style="display: none" id="gmplayer2round2">


                        
                        Player 2 swings his hammer...<span class="fa fa-gavel"></span><br>
                        
                        <strong>MISSES! </strong>
                        
                        <em>(with a roll of 3)</em>
                        <br>

                        
                        
                    </div>
                </div>

            <div class="panel panel-warning" style="display: none" id="gmstatus2">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <strong><i class="text-primary">Player 1</i></strong>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="750" aria-valuemin="0" aria-valuemax="750"  style="width:100%;">
                        <span>750 / 750</span>
                        </div>
                     </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
                <strong><i class="text-warning ">Player 2</i></strong>
                    <div class="progress">

                        <div class="progress-bar progress-bar-warning progress-bar-striped active pull-right" role="progressbar" aria-valuenow="710" aria-valuemin="0" aria-valuemax="750"  style="width:94.6666666667%;">
                        <span>710 / 750</span>
                        </div>
                    </div>
                </div>

            </div>

            </div>

＆＃13;

Answer 1

将延迟设置为次数i？

$($thisDiv).slideUp( 3000 ).delay( i * 800 ).fadeIn( 4000 ), 300);

循环中的fadein立即消失在一切

1 个答案: