Question

我希望Javascript wiz可以帮助同胞解决问题。我有一个相当直接的功能。当我向下滚动1px时，我想应用一个bounceDown类，这将运行5秒钟，然后该类将消失，以便将来运行相同的函数。

当我从当前滚动位置向上滚动时，我希望应用bounceUp效果。然而问题是我认为bounceUp效果只有在滚过原始滚动后才有效，但除此之外，如果之前的功能仍然在它的5秒转换上运行，那么当它尝试时它会变得很蠢。同时运行两个类，因此几乎需要应用延迟。

有人认为他们可以提供帮助，我感激不尽。

＆＃13;

<script>
(function($){

    $.fn.extend({ 

        addTemporaryClass: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);

            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });

})(jQuery);

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
        $(".spanner").addTemporaryClass("BounceDown", 5000);
    }
	
	else if (scroll <= 1) {
        $(".spanner").addTemporaryClass("BounceUp", 5000);
    }
});
</script>

＆＃13;

Answer 1

当addTemporaryClass运行时，布尔变量为'true'怎么样？所以：

(function($){

    var classAdded = false; //New

    $.fn.extend({ 

        addTemporaryClass: function(className, duration) {
            classAdded = true; //New
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
                classAdded = false; //New
            }, duration);

            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });

})(jQuery);

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 1 /*New*/ && !classAdded /*New*/) {
        $(".spanner").addTemporaryClass("BounceDown", 5000);
    }

    else if (scroll <= 1 /*New*/ && !classAdded /*New*/) {
        $(".spanner").addTemporaryClass("BounceUp", 5000);
    }
});

鼠标向上/向下滚动类的Javascript奇怪行为

1 个答案: