Question

我一直试图在每个部分中迭代一组列表项。也就是说，在滚动到特定部分时，我想要一组列表项只迭代一次。这不应该在连续滚动时重复。

我编写的代码遍历每个部分，也遍历部分中的每个列表项，但它会在每个滚动上继续。

我希望这只迭代每个部分一次。

   $(window).scroll(function(){
          var windscroll = $(window).scrollTop();
           $('body section').each(function(e){
            if($(this).position().top < windscroll){
              $(this).find(".inner-skills li").each(function(i){
              $(this).delay(i*500).animate({
                "width":"200px",
                "opacity":1
              },500);

              });
            }
          }) 
        });

Answer 1

您可以使用变量来检查您是否已滚动

试试这个：

 var already_scrolled = 0;
 $(window).scroll(function(){
      if(already_scrolled == 0){
      already_scrolled = 1;
      var windscroll = $(window).scrollTop();
       $('body section').each(function(e){
             if($(this).position().top < windscroll){
                $(this).find(".inner-skills li").each(function(i){
                $(this).delay(i*500).animate({
                   "width":"200px",
                   "opacity":1
                },500);

               });
             }
      }) 
      }
    });

Answer 2

您需要unbind：

$(window).scroll(function(){
   var windscroll = $(window).scrollTop();
   $('body section').each(function(e){
      if($(this).position().top < windscroll){
         $(this).find(".inner-skills li").each(function(i){
            $(this).delay(i*500).animate({
               "width":"200px",
               "opacity":1
            },500);
         });
      }
   }) 
   $(window).unbind('scroll');
});

编辑：

$(window).scroll(function(){
   var windscroll = $(window).scrollTop();
   $('body section').not('.completed').each(function(e){ //Loop through all sections WITHOUT class of completed
      if($(this).position().top < windscroll){
         $(this).find(".inner-skills li").each(function(i){
            $(this).delay(i*500).animate({
               "width":"200px",
               "opacity":1
            },500);
         });
         $(this).addClass('completed'); // add class of completed so it wont loop through this anymore
      }
   }) 
});

jQuery - 在嵌套的每个循环中只迭代一次

2 个答案: