关于向Div添加动画类的问题

Question

Hovering over the red box is adding a sweep to top blue color animation to the box but I would like to add this function by set-timeout function without hover. 将鼠标悬停在红色框上会向该框添加sweep to top蓝色动画的sweep to top但是我想通过set-timeout函数添加此功能而无需悬停。 can you please let me why this is not working 你能让我为什么这不起作用吗

 setTimeout(function() { $('.hvr-sweep-to-top').addClass('add'); }, 8000);

 .hvr-sweep-to-top { height: 150px; width: 150px; background: red; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .add { -webkit-transform: scaleY(1); transform: scaleY(1); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hvr-sweep-to-top"> </div>

Answer 1

The class which you are adding is just a hover class. 您要添加的类只是一个悬停类。 You have to add the script at the bottom of the page, and add it under document.ready function. 您必须在页面底部添加脚本，并将其添加到document.ready函数下。 here the color will change to blue after two seconds: 两秒钟后，颜色将变为蓝色：

 $( document ).ready(function() { setTimeout(function() { $('.hvr-sweep-to-top').addClass('new'); }, 2000); });

  .hvr-sweep-to-top { height: 150px; width: 150px; background: red; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .new:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); transform: scaleY(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .add { -webkit-transform: scaleY(1); transform: scaleY(1); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="hvr-sweep-to-top"> </body> </html>

Answer 2

Try to add 尝试添加

var someTxt = setTimeout(function() {
  $('.hvr-sweep-to-top').addClass('add');
}, 8000);

I'm not sure! 我不确定！

关于向Div添加动画类的问题

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-10-04 04:08:25

解决方案2
0 2017-10-04 04:06:46

关于向Div添加动画类的问题

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-10-04 04:08:25

解决方案2 0 2017-10-04 04:06:46

解决方案1
2 已采纳 2017-10-04 04:08:25

解决方案2
0 2017-10-04 04:06:46