使用 jQuery 更改 animate.css 类的默认速度答案

【问题标题】：Change default speed of animate.css classes with jQuery使用 jQuery 更改 animate.css 类的默认速度
【发布时间】：2016-05-24 19:29:52
【问题描述】：

我想在滚动条更改时添加 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);
           }
           });
   });

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

【问题讨论】：

你是对的，代码有问题，jQuery 的 animate() 动画 CSS 值 （和其他东西），但你不能只粘贴 @987654323 @ 里面，希望它有效，它不会。
$(this).addClass("animated fadeInUp") 产生问题，但是怎么做呢？

标签： jquery css animate.css

【解决方案1】：

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

如果您确实希望每个动画都为 3 秒，您可以更改文件中默认的 animated 类：

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

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

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

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

【讨论】：

是的，这是完美的答案。