将 animate.css 类 的默认速度更改为 jQuery

Question

我想在滚动条更改时添加 animate.css 类，我的意思是当滚动条向下滚动时，div 应该使用动画 fadeInUp 进行动画处理，但动画速度应该减慢。我已经用 jQuery animate() 函数进行了测试，但它对我不起作用。

$(document).ready(function(){
$(window).scroll(function(){
var scrolls = $(window).scrollTop();
   if(scrolls > 900){//from top to 900px my div appears
       $(".box-animate").animate({function(){
                 $(this).addClass("animated fadeInUp");
                 }
                  },3000);
           }
           });
   });

我知道我的代码中存在一些愚蠢之处:) 但我找不到它？

Answer 1

Animate.css 就是 CSS。您不需要使用 jQuery 来改变它，您可以根据它提供的带有您自己的速度设置的 classes 创建您自己的自定义 classes。

如果你确实想要每个动画三秒，你可以在文件中更改默认值 animated class:

.animated {
  animation-duration: 3s;
  animation-fill-mode: both;
}

将class animated放在你想要动画的元素上，然后你可以触发一个动画：

$('.box-animate').addClass("fadeInUp");

您根本不需要使用 jQuery 的 .animate。