使用JavaScript或jQuery按顺序淡入大量对象

Fade in a large amount of objects sequentially with JavaScript or jQuery?

本文关键字：淡入 对象 顺序 JavaScript jQuery 使用      更新时间：2023-09-26

我正试图让900个点一个接一个地淡出。我当前的代码从一个div生成它们，然后为它们分配一个数字类。

$(document).ready(function(){
    function generate() {    
        var circle = $('.circle');
        var container = $('#container');
        for (var i = 0; i <= 900; i++) {
            circle.clone().attr('class', 'circle ' + i).appendTo(container);
        }
    }
    
    generate();
});
 <style>
  #container {
	width: 1250px; 
	margin:0 auto;
	max-width:1770px; 
	height: 670px;
	overflow:hidden;
	background-color:pink;
	position:relative;
  }
  .circle {
    border-radius: 50%;
	width: 10px;
	height: 10px; 
	background-color:#8AB5DC;
	margin:10px;
	float:left;
  }
	
  
  </style>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
 
<div id="container">
	<div class="circle">
    </div> 
</div>

这对你有用吗：

$(document).ready(function () {
    function generate() {
        var duration = 400;
        var delayFactor = 40;
        var circle = $('.circle');
        var container = $('#container');
        for (var i = 0; i <= 900; i++) {
            circle.clone().attr('class', 'circle ' + i).appendTo(container).hide();
        }
        $('.circle').each(function (index) {
            $(this).delay(index * delayFactor).fadeIn(duration);
        });
    }
    generate();
});
#container {
    width: 1250px;
    margin:0 auto;
    max-width:1770px;
    height: 670px;
    overflow:hidden;
    background-color:pink;
    position:relative;
}
.circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color:#8AB5DC;
    margin:10px;
    float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
    <div class="circle"></div>
</div>

使用duration和delayFactor值。希望这能有所帮助。

相关文章：