jquery scrollTop 动画功能不工作

Question

我已经编写了我的 jQuery 代码，该代码应该为我的元素创建滚动动画的淡入效果。但该元素不会显示在卷轴上。请问有人知道我的代码可能有什么问题吗？下面是我的代码：

    $(document).ready(function() {

        var windowHeight = jQuery(window).height();

        var windowScrollPosTop = jQuery(window).scrollTop();

        var windowScrollPosBottom = windowHeight + windowScrollPosTop;

    jQuery.fn.revealOnScroll = function() {

        return this.each(function() {

        var objectOffset = jQuery(this).offset();
        var objectOffsetTop = objectOffset.top;

        if (!jQuery(this).hasClass("hidden")){

            jQuery(this).css("opacity", 0).addClass("hidden");

        }


        if (!jQuery(this).hasClass("animation-complete")) {

            if (windowScrollPosBottom > objectOffsetTop) {
                jQuery(this).animate({"opacity": 1}, 
                3000).addClass("animation-complete");
            }
        }

        });

    } // end function here

    jQuery(window).scroll(function(){
        windowHeight = jQuery(window).height();

        windowScrollPosTop = jQuery(window).scrollTop();

        windowScrollPosBottom = windowHeight + windowScrollPosTop;

        jQuery(".tg-whychooseus").revealOnScroll();

     });

Answer 1

如果您删除对 "hidden" class 的引用并以类似这样的方式开始（我已经给出了内联样式但是 css 可能更好):

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

如果添加具有 "display:none;" 属性的 ".hidden" class，动画会运行，但元素仍然是 "display:none;"，因此 class，这可能是该元素未显示的原因（我猜是因为您没有给出 html 或 css）。

祝插件好运（考虑 "throttling" 至少避免连续触发 onScroll，如果所有元素都有 class "animation-complete") 我希望这个帮助ps.

(ps 这里 "throttling" 上有一篇文章 How to Throttle Scroll Events)

(pps 我重新整理了你的代码，以提供一种不同的方法来使其工作（但我确信它可以变得更有效率，而且我还没有测试显示的逻辑多个 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");
                            });
                        }
                    }
                }
            });
        });
    });
}();

我希望这个帮助ps。

jquery scrollTop 动画功能不工作

jquery scrollTop animation function not working

jquery

jquery-animate