如何根据 jQuery 中元素的顺序设置持续时间

Question

我有一个 ul，里面可能有也可能没有 lis！

如果有任何 li，那么点击 #something 第一个 li 应该在 500 毫秒内淡出，第二个在 1000 毫秒后淡出，依此类推！

我使用了这段代码，但它不仅不起作用，而且不允许任何其他代码工作！！感谢您的帮助！！

jquery：

 $('nav ul li').addClass('main');
 $('li').addClass('main'); 
   $("#something").click(function() {
      dothat();
      function dothat(){
         for(var x=0,x>0,x++){
         $("li.main").eq(x).fadeToggle(500*x);
         }
      };
   });

.html：

<ul>
  <li>
    <!--sometext-->
    </li>
  <li>
    ...
</ul>

Answer 1

试试这个

$('li').addClass('main'); 
$("#something").click(function() {
    $lis = $("li.main");
    for(var x=0;x<$lis.length;x++){
        $lis.eq(x).fadeToggle(500*x);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3 id="something"> Click here </h3>
<ul>
  <li> li 1 </li>
  <li> li 2 </li>
  <li> li 3 </li>
  <li> li 4 </li>
    ...
</ul>

Answer 2

我以前做过类似的事情，就我而言，我还需要知道所有动画何时完成，所以我使用了 Deffered

   ...
    var duration = rows.length > 3 ? 1000 : 500;
    var promises = $.map(rows, function (row, i) {
        return $.Deferred(function (dfd) {
            row.fadeOut(duration - Math.min(700, i * 50), function () {
                row.remove();
                dfd.resolve();
            });
        });
    });

您可以在此处查看此演示和代码 http://demo.aspnetawesome.com/TreeGrid#Tree-Grid-with-CRUD-operations 尝试删除网格中的根节点