javascript - 我想在延迟一段时间后在产品li中一一添加淡入淡出效果

Question

我希望所有产品列表根据我的页面高度在一段延迟后逐渐淡出

• 我不希望所有的 li 一次出现在整页
• 我希望当我滚动 300px 时，根据我的页面高度显示 3 li
• 我不会定义滚动高度，我希望它会根据我的产品 li 高度获取高度
• 当我再次滚动更多 3 个 li 时，我希望有人理解

下面的代码在一段延迟后一次加载所有 li 以获取整页

我希望所有产品都根据我滚动的距离加载，这意味着产品取决于页面高度

<div  id="category-products" class="negi_fade">
<ul>
   <li>karbon</li>
   <li>karbon</li>
   <li>karbon</li>

if (scroll >= 600) {

  // $j(".negi_fade").fadeIn(2000);
  $j('.negi_fade li').each(function(index) {
        $j(this).delay(250*index).fadeIn(400);
  });

Answer 1

@拉胡尔·内吉

您的代码工作正常，但您只需进行少量更改。

应用下面的CSS代码和Jquery代码

  <style>
#category-products>ul>li
{
display:none;
}
</style>


//Jquery Code
if($(document).scrollTop()>=600)
{
$('.negi_fade li').each(function(index) {
        $(this).delay(250*index).fadeIn(400);
  });
}