HTML

Question

我正在使用animate.css，因为我是初学者，所以很简单。我可以让动画工作，并可以使用animation-duration: 3s和animation-delay: 0s;延迟动画但是当我向下滚动到视口时，我无法找到触发它的方法。这是我到目前为止尝试的代码：

HTML

<div class="about-container">
         <p>Content here...</p>
     </div>

CSS

.about-container{
    background-color: #a3c17f;
    width: 500px;
    height:500px;
    margin: 0 auto;    
}

JAVASCRIPT

$(function() {
   if ($("#about-container").length > 0) {
      addClass('animated pulse')
   }
});  
     </script>

Answer 1

看看你的元素。你正在上课。所以它应该是$（＆＃39; .about-container＆＃39;）。但是，您可以将其更改为ID。

$(function() {
   if($('#about-container').length > 0) { // check if there's an element
      $('#about-container').addClass('animated pulse'); // this is how you add class in jquery
   }
});

普通Javascript

var abtContainer = document.getElementById('about-container');

if(abtContainer.length > 0) {
    abtContainer.classList.add('animated pulse'); 
}

然而，这种方法不适用于IE8及以下版本。

因此，如果您支持旧浏览器，则需要使用此功能。

abtContainer.className += ' animated pulse';

http://codepen.io/anon/pen/QERZpz

Answer 2

试试这个：

“OnScreen JS”

一个jQuery插件，可以在元素进入或离开视口时对其进行处理

https://silvestreh.github.io/onScreen/

Answer 3

   function addClass(elem, clazz) {
     if (!elemHasClass(elem, clazz)) {
    elem.className += " " + clazz;
      }
    }

         function elemHasClass(elem, clazz) {
          return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
         }

试试这个

      jQuery('.row.homeCats').addClass("hideme").viewportChecker({
            classToAdd: 'visible animated fadeInDown',

        });

Answer 4

从您的代码中，您似乎正在添加addClass（'动画脉冲'）。由于addClass支持多个类，因此您的代码是正确的。为了测试你的代码，你可以尝试以这种方式应用类.addClass（'animated'）。addClass（'pulse'）; 但是使用$（this）.addClass（'animated pulse'）将类附加到'.about-container'DIV。

从您给定的HTML DIV中，您没有ID＃about-container，所以替换，

        $(function() {
         if ($(".about-container").length > 0) {
          $(this).addClass('animated pulse');   // Add class supports multiple class
    //OR
      $(this).addClass('animated'). addClass('animated'); // But try this also 
   }
   });

JavaScript：使用animate.css

HTML

CSS

JAVASCRIPT

4 个答案: