CODEWITHSUNDEEP
jquerycss
Staveven
Staveven

Reputation: 120

Correct syntax for adding CSS with JQuery for additional properties

Basically I want to use JQuery to manipulate the CSS when the page loads.

I want to add this CSS:

animation: drawcircle 1.5s 2

How do I break that up to attach via Jquery CSS?

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

Upvotes: 0

Views: 36

Answers (2)

masterpreenz
masterpreenz

Reputation: 2290

There are 2 ways to do it either you use class toggle or manual depending on your needs.

// 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");

hope that helps

Upvotes: 1

Torsten Barthel
Torsten Barthel

Reputation: 3448

You could do something like the following:

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

Where

drawcircle

is the animation you defined in an @keyframes definition.

Here is an example of how to draw a circle with pure CSS: Draw a circle with pure CSS

You can use the mask element in that example to start the animation like:

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

Upvotes: 1

Related Questions