jQuery动画触发问题：实现滚动到Div时执行animate.css动画

我来帮你搞定这个滚动动画的问题～你现在遇到的核心问题是一开始就给所有目标Div加上了动画类，导致所有动画一次性触发，完全没等滚动到对应位置。咱们一步步修正：

原代码的问题分析 #

1. 在each循环里，你直接选中了所有两个section元素添加animated类，而不是当前遍历的$(this)，这就导致页面加载后所有动画立刻启动了。
2. 判断元素是否进入视口的逻辑顺序反了——你先加了动画类，再做判断，这完全起不到“滚动到才触发”的作用。
3. 用长长的ID选择器不够灵活，后续新增元素还要改代码，不如给需要动画的元素加个统一的类。

修正后的代码实现 #

第一步：给目标元素加统一类

先给你的两个section加上同一个类，比如scroll-animate，这样代码更简洁：

<div id="shopify-section-1514231356920" class="scroll-animate">...</div>
<div id="shopify-section-1514232991457" class="scroll-animate">...</div>

第二步：修正JavaScript逻辑

// 监听窗口滚动事件
$(window).scroll(function() {
    // 遍历每个需要滚动触发动画的元素
    $('.scroll-animate').each(function() {
        const $element = $(this);
        // 计算元素的顶部位置和窗口底部位置
        const elementTop = $element.offset().top;
        const windowBottom = $(window).scrollTop() + $(window).height();
        
        // 判断：元素进入视口，且还没触发过动画
        if (windowBottom > elementTop && !$element.hasClass('animated')) {
            // 添加animate.css的动画类
            $element.addClass('animated slideInRight');
            // 渐显元素（和动画同步）
            $element.animate({'opacity': '1'}, 500);
        }
    });
});

第三步：优化CSS样式

.scroll-animate {
    -webkit-animation-duration: 4s;
    animation-duration: 4s; /* 加上标准写法兼容更多浏览器 */
    opacity: 0;
    animation-fill-mode: forwards; /* 动画结束后保持最后状态，避免回到透明 */
}

关键优化点说明 #

• 只触发一次动画：通过检查!$element.hasClass('animated')，确保每个元素的动画只会在第一次进入视口时触发，不会随着滚动反复播放。
• 调整触发时机：用windowBottom > elementTop表示元素顶部进入视口就启动动画，这样用户刚看到元素时就有动画，体验更自然；如果你还是想等元素完全进入视口再触发，可以改成windowBottom > (elementTop + $element.outerHeight())。
• 兼容与维护：统一类名让后续新增动画元素更方便，不用修改JS代码；加上标准的animation-duration和animation-fill-mode提升兼容性和动画效果。

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