Ich kann meine Animation nicht auf Auslastung meiner Website mit jquery

Question

arbeiten So das Problem, das ich habe, ist, dass ich nicht scheinen kann, meine jQuery-Funktion, um eine Klasse zum Starten meiner Animation hinzuzufügen? Ich habe viele verschiedene Wege ausprobiert, um es zur Arbeit zu bringen, keiner von ihnen funktioniert!

jQuery

$(document).ready(function(){ 
    window.onload = function render(){ 
    $('.title .sub-title').addClass('render'); 
} 
}); 

CSS

.render { 
    animation-name: render; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
} 

@keyframes render { 
    0% { transform: translateX(-800px); } 
    100% { transform: translateX(0px); } 
} 

HTML

<div class="site-header-title-wrapper"> 
    <h1 class="title">Template 1</h1><!--Need To add animation 
    <h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to--> 
</div> 

Bitte kann jemand helfen?

Es wäre sehr vorteilhaft!

Answer 1

Versuchen Sie Folgendes:

$(document).ready(function(){ 
    $('.title, .sub-title').addClass('render'); 
}); 

Der Code in Ihrem Beispiel zielt auf eine .sub-title Element innerhalb eines Elements .title verschachtelt. Wenn Sie in Ihrer CSS-Auswahl ein Komma einfügen, sollte dies behoben sein.

Answer 2

Ihre .sub-title Klasse ist auskommentiert. Versuchen Sie dies:

<div class="site-header-title-wrapper"> 
    <h1 class="title">Template 1</h1> 
    <h4 class="sub-title">- Here is a Template Slogan -</h4> 
</div>