javascript - 使用 jquery .css() 添加自定义样式名称

Question

我正在使用 Animate.css 并尝试分配持续时间、延迟和循环选项，但该命令被忽略了。我认为这是因为 propertyName 未被识别，因此被忽略了。我想将它直接应用于元素，而不是将标签附加到带有信息的正文。

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

有没有办法强制它添加它不认识的东西？

Update - 加个例子，看起来乱七八糟的，不过都是用jquery动态添加的，作为预览。稍后将从数据库中调用并分配。

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

Answer 1

如果元素上没有使用其他内联样式，您可以使用 attr 函数将样式设置为内联

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

编辑:

如果已经应用了内联样式，您可以尝试在 css 中为类定义这些规则，然后使用 jQuery 添加该类

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