使用JavaScript或jQuery顺序淡入大量对象？
[英]Fade in a large amount of objects sequentially with JavaScript or jQuery?
问题描述
我试图使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>
1 个解决方案
解决方案1
0 2015-06-30 03:48:49
这对您有用吗：
$(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值。 希望这可以帮助。
jQuery按钮按顺序淡入淡出
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.