JavaScript: addClass, wenn Element im Ansichtsfenster mit animate.css ist

Question

Ich benutze animate.css, die schön und einfach ist, da ich ein Anfänger bin. Ich kann die Animation zum Laufen bringen und kann die Animation mit animation-duration: 3s und animation-delay: 0s; verzögern. Aber ich kann nicht finden, wie man es auslöst, wenn es in meinem Ansichtsfenster kommt, während ich hinunter scrolle. Hier ist der Code habe ich versucht, so weit:

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

Blick auf Ihrem Element. Sie verwenden Klasse. Also sollte es $ ('. About-container') sein. Sie können es jedoch in ID ändern.

$(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 
    } 
}); 

Plain Javascript

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

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

Allerdings funktioniert diese Methode nicht auf IE8 und unten.

Sie müssen dies also verwenden, wenn Sie alte Browser unterstützen.

abtContainer.className += ' animated pulse'; 

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

Answer 2

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

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

versuchen diese

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

     }); 

Answer 3

starten:

"OnScreen JS"

Ein jQuery-Plugin, das Zeug Elemente tut w hen sie

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

Answer 4

aus dem Code das Ansichtsfenster betreten oder verlassen, scheint es Sie hinzufügen addClass ('animiert Puls'). Da addClass mehrere Klassen unterstützt, ist Ihr Code richtig. Um Ihren Code zu testen, können Sie versuchen, eine Klasse wie diese anzuwenden .addClass ('animiert') .addClass ('pulse'); Verwenden Sie $ (this) .addClass ('animierter Impuls'), um die Klasse an '.about-container' DIV anzuhängen.

Von Ihrem angegebenen HTML DIV nicht Sie ID # about-Container haben, So ersetzen,

 $(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 
    } 
    });