我可以'不能让我的动画工作在加载我的网站使用jquery

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

本文关键字：我的 加载 网站 jquery 工作 动画 不能 我可以      更新时间：2023-09-26

所以我遇到的问题是，我似乎不能让我的jQuery函数添加一个类来启动我的动画?我尝试了很多不同的方法来让它工作，没有一个是有效的!

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>

请问有人能帮忙吗?

这将是非常有益的!

尝试如下:

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

示例中的代码针对嵌套在.title元素中的.sub-title元素。在CSS选择器中加入逗号应该可以解决这个问题。

您的.sub-title类被注释掉了。试试这个:

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