Question

基本上我想在页面加载时使用JQuery来操作CSS。

我想添加这个CSS：

animation: drawcircle 1.5s 2

如何通过Jquery CSS将其分解？

.css ("animation", "Drawcircle 1.5s 2")？

Answer 1

您可以执行以下操作：

element.css('animation-name', 'drawcircle');
element.css('animation-duration', '4s');

哪里

画圆

是您在@keyframes定义中定义的动画。

以下是如何使用纯CSS绘制圆的示例： Draw a circle with pure CSS

您可以使用该示例中的mask元素来启动动画，如：

mask.css('animation-play-state', 'running');

Answer 2

根据您的需要，有两种方法可以使用课堂切换或手动。

// The class toggle style
// JS
element.classList.add("animate"); // to start
element.classList.remove("animate"); // to stop

// css
thelement.animate {
   animation: drawcircle 1.5s 2;
}

OR

// jQuery
$(element).addClass("animate"); // to start
$(element).removeClass("animate"); // to stop

// css
thelement.animate {
   animation: drawcircle 1.5s 2;
}

OR

// the manual style
// JS
element.style.animation = "drawcircle 1.5s 2";

OR

// jQuery
$(element).css("animation", "spin 1.5s infinite");

希望有所帮助

使用JQuery为其他属性添加CSS的正确语法

2 个答案: