jquery - 使用 jQuery 更改 animate.css 类的默认速度

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 更改它，您可以根据它提供的具有您自己的速度设置的类来创建您自己的自定义类。

如果你确实想要每个动画三秒钟，你可以只更改文件中的默认 animated 类:

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

将 animated 类放在要设置动画的元素上，然后您可以通过以下方式触发动画:

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

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