Add custom style name using jquery .css()

Question

I am working with Animate.css and trying to assign the duration, delay and looping options, but the command is being ignored. I think it is because propertyName is not recognized and so is just ignored. I would like to apply it right to the element instead of appending a tag to the body with the info.

.css(
  {
    "-vendor-animation-duration": "7s", 
    "-vendor-animation-delay": "2s", 
    "-vendor-animation-iteration-count": "infinite"
  }
);

Is there a way to force it to add something it doesn't recognize?

Update - Adding an example,it looks messy, but it is all dynamically added using jquery as a preview. Later it will be called from the database and assigned.

<div data-layer="0" data-type="sliderLayer" data-slide="0" 
data-positioningtypewidth="px" data-positioningtypeheight="px" 
data-positioningtypeleft="px" data-positioningtypetop="px" data-id="0" 
class="resizable draggable canvasItem sliderLayer-0 slide-0 draggable-0 
ui-draggable ui-draggable-handle ui-resizable bounce.slide animated" 
style="background-color: rgb(204, 17, 102); z-index: 100; animation-duration: 
1000ms; opacity: 0.88; display: block; width: 455px; height: 115px; border-
radius: 25.15px; background-size: 50px 50px; background-image: -moz-linear-
gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 
50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 
75%, transparent); box-shadow: 0px 0px 8px rgb(119, 61, 161);">

mpallansch · Accepted Answer · 2015-06-01 18:00:51Z

2

If no other inline styles are being used on the element, you could use the attr function to set the styles inline

.attr("style","-vendor-animation-duration: 7s;-vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite;");

EDIT:

If inline styles are already being applied, you could try defining these rules for a class in css, then add the class using jQuery

<style>
    .vendor-animation {
        -vendor-animation-duration: 7s; 
        -vendor-animation-delay: 2s; 
        -vendor-animation-iteration-count: infinite;
    }
</style>
<script>
    $('#element').addClass('vendor-animation');
</script>

edited Jun 1, 2015 at 18:00

answered Jun 1, 2015 at 17:44

mpallansch

1,1946 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Over a year ago

There are quite a few already applied to the element, I guess I "could" get the styles, concatenate them with the new ones and reapply.

mpallansch Over a year ago

The only other thing I could think to do besides concatenate the styles would be to define these rules for a specific class like `.vendor-animation' in a css file, and then use jquery to add that class instead.

Collectives™ on Stack Overflow

Add custom style name using jquery .css()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related