jQuery 中的 FadeIn 产品卡动画无法正常工作-解网

问：

我正在通过ajax进行产品卡过滤，遇到了一个小问题。当网站访客进入包含所有产品卡片的页面时，卡片必须以流畅的动画逐一出现。我用 Bootstrap 5 卡在此页面上制作了产品卡，并发出了 ajax 请求来显示这些卡。问题在于，当访客进入带有产品卡片的页面时，所有卡片会同时显示 0.5 秒，然后它们会消失，并开始显示卡片的动画。我不明白为什么会这样。

此卡代码：

<div class="col">
    <div class="card border-0 bg-transparent">
        <div class="ratio" style="--bs-aspect-ratio: 62.5%;">
            <?php echo get_the_post_thumbnail( $id, 'full', array('class' => 'img-fluid') ); ?>
        </div>
        <a href="<?php the_permalink(); ?>" class="stretched-link">
            <div class="card-img-overlay"></div>
        </a>
        <div class="card-text w-100 ps-lg-4 ps-3 fadeIn-bottom">
            <h5><?php the_title(); ?></h5>
            <h4 class="text-uppercase fw-bold mt-lg-3 mt-1"><?php echo (get_post_meta( get_the_ID(), 'company_meta_key', 1 )); ?></h4>
        </div> 
    </div>
</div>

这是我用于动画的jQuery：

$(document).ready(function() {
  $('.card').each(function(i) {
    // 'i' stands for index of each element
    $(this).hide().delay(i * 300).fadeIn(600);
  });
});


// ajax запрос
$('.cat-list_item').on('click', function(e) {
    e.preventDefault();
    $('.cat-list_item').removeClass('active');
    $(this).addClass('active');
    
    $.ajax({
      type: 'POST',
      url: '/wp-admin/admin-ajax.php',
      dataType: 'html',
      data: {
        action: 'filter_projects',
        category: $(this).data('slug'),
      },
      success: function(res) {
        $('.post-filter').html(res);
        $('.card').each(function(i) {
          // 'i' stands for index of each element
          $(this).hide().delay(i * 300).fadeIn(600);
        });
      }
    })

  });

当用户将鼠标悬停在此卡片上时，此动画是否与动画冲突？

jquery 引导程序-5

jQuery 中的 FadeIn 产品卡动画无法正常工作

FadeIn product card animation in jQuery doesn't work correctly

评论