Question

我创建了两个<div> s。

滚动时，我希望.indie消失，.jazz出现。

然后，在第二个卷轴上，我想要出现第3个div。

目前，我的Javascript隐藏了两个div，我试图想出一种方法，我可以为每个滚动动作编号，以激活每个<div>的可见性。在对滚动动作进行编号时，我还想向上滚动再次返回第一个<div>。

目前我的代码看起来像这样。我也在使用animate.css

$(window).scroll(function(){
       if ($('.indie').is(':visible')) {
             $('.fadeInRight').addClass("fadeOutLeft").removeClass("fadeInRight");
             $('.fadeInLeft').addClass("fadeOutRight").removeClass("fadeInLeft");
             $('.fadeInUp').addClass("fadeOutDown").removeClass("fadeInUp");
             $('.fadeInDown').addClass("fadeOutUp").removeClass("fadeInDown");
             $('.bounceOutRight').addClass("bounceInLeft").removeClass("bounceOutRight");
             $('.bounceOutLeft').addClass("bounceInRight").removeClass("bounceOutLeft");
             $('.bounceOutUp').addClass("bounceInDown").removeClass("bounceOutUp");
             $('.bounceOutDown').addClass("bounceInUp").removeClass("bounceOutDown");
             $('.jazz').css("visibility", "visible");
             setTimeout(function() {
                 $('.indie').css("visibility", "hidden");
              }, 500);
           }

  });



  $(window).scroll(function(){
           if ($('.jazz').is(':visible')) {
             $('.bounceInRight').addClass("bounceOutLeft").removeClass("bounceInRight");
             $('.bounceInLeft').addClass("bouneOutRight").removeClass("bounceInLeft");
             $('.bounceInUp').addClass("bounceOutDown").removeClass("bounceInUp");
             $('.bounceInDown').addClass("bounceOutUp").removeClass("bounceInDown");
             setTimeout(function() {
                 $('.jazz').css("visibility", "hidden");
              }, 500);
           }
  });

Answer 1

将所有代码放在一个函数中，因为第二个声明会覆盖第一个。我也做了一些调整：

$(window).scroll(function(){
       if ($('.indie').is(':visible')&&!$('.jazz').is(':visible')) {
             $('.fadeInRight').addClass("fadeOutLeft").removeClass("fadeInRight");
             $('.fadeInLeft').addClass("fadeOutRight").removeClass("fadeInLeft");
             $('.fadeInUp').addClass("fadeOutDown").removeClass("fadeInUp");
             $('.fadeInDown').addClass("fadeOutUp").removeClass("fadeInDown");
             $('.bounceOutRight').addClass("bounceInLeft").removeClass("bounceOutRight");
             $('.bounceOutLeft').addClass("bounceInRight").removeClass("bounceOutLeft");
             $('.bounceOutUp').addClass("bounceInDown").removeClass("bounceOutUp");
             $('.bounceOutDown').addClass("bounceInUp").removeClass("bounceOutDown");
             $('.jazz').css("visibility", "visible");
             setTimeout(function() {
                 $('.indie').css("visibility", "hidden");
              }, 500);
           }
           if ($('.jazz').is(':visible')) {
             $('.bounceInRight').addClass("bounceOutLeft").removeClass("bounceInRight");
             $('.bounceInLeft').addClass("bouneOutRight").removeClass("bounceInLeft");
             $('.bounceInUp').addClass("bounceOutDown").removeClass("bounceInUp");
             $('.bounceInDown').addClass("bounceOutUp").removeClass("bounceInDown");
             setTimeout(function() {
                 $('.jazz').css("visibility", "hidden");
              }, 500);
           }
  });

仅在鼠标上的第二次滚动运动时激活Jquery功能

1 个答案: