jQuery产品卡片FadeIn动画异常求助：加载时卡片先显后隐

一、页面加载时卡片闪现的原因及解决方法 #

原因 #

浏览器会优先渲染HTML输出的可见元素，而你的$(document).ready是在DOM完全加载后才执行，这就导致卡片先被渲染显示，之后JS才执行.hide()，时间差造成了0.5秒左右的闪现现象。

解决方法 #

1. 用CSS默认隐藏卡片（核心方案）

给.card添加初始隐藏样式，从根源避免初始渲染时显示：

.card {
  display: none;
}

2. 优化JS动画逻辑

既然CSS已经默认隐藏卡片，JS里就不需要再调用.hide()，直接执行淡入动画即可，减少多余操作：

// 页面初始加载动画
$(document).ready(function() {
  $('.card').each(function(i) {
    $(this).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) {
          $(this).delay(i * 300).fadeIn(600);
        });
      }
    })
});

二、与hover动画的冲突分析 #

一般情况下不会冲突，除非你的hover动画存在以下特殊逻辑：

• 如果hover动画修改了display属性（比如display: none），会打断fadeIn的显示状态；
• 如果hover动画强制锁定opacity: 1，会覆盖fadeIn的渐变效果。

如果你的hover动画是常规的CSS过渡（比如控制transform、box-shadow、background-color等属性），完全不会影响当前的淡入动画，因为两者操作的是独立的CSS属性，互不干扰。

内容的提问来源于stack exchange，提问作者Nikita Pelevin