Question

我已经编写了我的jQuery代码，它应该在滚动动画上为我的元素创建一个fadeIn。但该元素并未在滚动中显示。请问有谁知道我的代码可能有什么问题？这是我的代码：

    $(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

如果您删除了对隐藏＆＃34;的引用，那么您的代码似乎有用（尽管我会检查它的效率）上课并从这样的事情开始（我已经给出了内联样式，但css可能更好）：

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

如果添加具有".hidden"属性的"display:none;"类，则动画会运行，但由于此类，该元素仍然是"display:none;"，这可能是元素不存在的原因透露（我猜测因为你没有给出html或css）。

插件好运（考虑＆＃34;限制＆＃34;至少要避免连续触发onScroll，并尝试确保如果所有元素都具有类＆＃34;动画，则不会不必要地分配变量值-complete＆＃34;）我希望这有帮助。

（ps有一篇文章关于＆＃34;限制＆＃34;这里How to Throttle Scroll Events）

（pps我重新编写了你的代码以提供一种不同的方法来使其工作（但我确信它可以提高效率，而且我还没有测试过显示多个逻辑的逻辑divs - 你可以看看那个。）我建议你去看看，并参考一些你可以找到尝试做同样事情的其他代码，而且，没有真正的捷径，你可能需要花点时间来理解插件的有时微妙的概念。它并不总是直截了当，而且通常最好从非常简单并从那里开始构建。网上有资源但是他们非常分散。）

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");
                            });
                        }
                    }
                }
            });
        });
    });
}();

我希望这会有所帮助。

jquery scrollTop动画功能不起作用

1 个答案: