Question

<script>
$(document).ready(function(){
    $( "#clr" ).each(function(i) {
    $("#clr"+id).fadeOut(0).delay(1000*i).fadeIn(1850);
   )};
});
</script>

<div class="row" id="clr">
        <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
        <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
        <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
        <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
     </div>
   </div>

我试图一个接一个地加载div有一些延迟但是无法这样做请帮助这样做

Answer 1

首先，您需要修复传递给.each函数的匿名函数周围的语法错误。基本上，)的结束.each括号应该在传递给它的匿名函数的结束}之后。

然后，您应该迭代#clr而不是迭代#clr > a - 意味着锚标签而不是div元素。

此外，您不必在.each功能中指定选择器。您可以使用$(this)来引用元素。

最后，您可以将.each内的元素索引称为id或i。在下面的代码段中，我使用了id。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#clr > a").each(function(id) {
        $(this).fadeOut(0).delay(1000 * id).fadeIn(1850);
    });
  });
</script>

<div class="row" id="clr">
  <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
  <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
  <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
  <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
</div>
</div>

＆＃13;

Answer 2

尝试使用回调函数：

$(document).ready(function(){
    $('[id^="clr"]').each(function(i) {
        let $this = $(this);
        $this.fadeOut(0, function () {
            setTimeout(function() {
                $this.fadeIn(1850);
            }, 1000 * i);
        });
    )};
});

在页面上逐个加载div

2 个答案: