jquery scrollTop动画功能不工作

如果删除对“hidden”类的引用并从以下内容开始(我给出了内联样式,但css可能更好),那么您的代码似乎可以工作(尽管我会检查它的效率):

<div class="tg-whychooseus" style="opacity:0">WHY CHOOSE US ?</div>

如果您添加 ".hidden" 具有 "display:none;" 属性,动画将运行,但元素仍然 “显示:无;” 因为这个类,这可能就是元素没有显示的原因(我猜是因为您没有给出html或css)。

祝插件好运(至少考虑“节流”以避免onScroll的连续触发,并尝试确保如果所有元素都有类“animation complete”,则不会不必要地分配变量值),我希望这会有所帮助。

(ps这里有一篇关于“节流”的文章 How to Throttle Scroll Events )

(请注意,我已经对您的代码进行了重新格式化,以提供一种不同的方法使其工作(但我相信它可以更高效,而且我还没有测试显示多个div的逻辑-您可以看看)。我建议您仔细阅读它,并参考一些您可以找到的其他代码来尝试做同样的事情,而且,没有真正的捷径,您可能需要花一些时间来理解插件有时很微妙的概念。它并不总是简单明了的,和以往一样,通常最好从非常简单的开始并从那里开始构建。网络上有资源,但它们非常分散)。

Html:

<div class="tg-whychooseus" style="opacity:0;">WHY CHOOSE US ?</div> 

脚本(带注释):

// Function invoked immediately
!function () {
    // Put any code here for before document.ready

    // When document ready
    $(function () {
        // Get collection of revealItems
        var revealItems = $(".tg-whychooseus");
        // Adjust revealItems when document.ready, before scrolling
        // (Not sure why you need this - why not hard code this in to html?)
        $.each(revealItems, function () {
            if (!jQuery(this).hasClass("hidden")) {
                jQuery(this).css("opacity", 0).addClass("hidden");
            }
        });
        // Whenever there is a scroll event
        jQuery(window).scroll(function () {
            // You should consider "throttling" these events
            // to kick in shortly after a scroll event has completed
            // rather than continuously => logic here not checked
            var windowHeight = jQuery(window).height();
            var windowScrollPosTop = jQuery(window).scrollTop();
            var windowScrollPosBottom = windowHeight + windowScrollPosTop;
            // Iterate through the collection of revealItems
            revealItems.each(function () {
                if (!jQuery(this).hasClass("animation-complete")) {
                    // When to animate logic (not tested), and note you've incurred overhead just to get to this point for each scroll event
                    var objectOffset = jQuery(this).offset();
                    var objectOffsetTop = objectOffset.top;
                    if (windowScrollPosBottom > objectOffsetTop) {
                        if (!jQuery(this).hasClass("animation-complete")) {
                            // Animate
                            $(this).animate({
                                opacity: 1
                            }, 3000, function () {
                                // When animation is complete
                                $(this).addClass("animation-complete");
                            });
                        }
                    }
                }
            });
        });
    });
}();

我希望这有帮助。