CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tyler Potts
Tyler Potts

Reputation: 3

I can't get my animation to work on load of my website using jquery

So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!

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>

Please can someone help?

It would be very beneficial!

Upvotes: 0

Views: 49

Answers (2)

jazibobs
jazibobs

Reputation: 422

Try the following:

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

The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.

Upvotes: 3

Mingle Li
Mingle Li

Reputation: 1350

Your .sub-title class is commented out. Try this:

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

Upvotes: -1

Related Questions