javascript - jquery 元素到 javascript 元素

Question

所以我正在使用 css 动画，在 javascript 中，您可以使用以下代码启动和停止一个：

element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";

现在我有一些看起来像这样的 Jquery：

$(".info").click(function(){
    $it = $(this).closest(".thing");
    //how can I use the above javascript on the specified jquery element?
});

我的问题在代码的注释中。这可能吗？如何？

这是一个 jsfiddle 显示它是如何不工作的

Answer 1

这$lt是一个 jQuery 包装器对象，不是 dom 元素引用，您可以使用索引 0 获取 dom 元素引用

$it[0].style.webkitAnimationPlayState="running"; 

演示：小提琴

或者使用 jQuery 提供的.css()设置样式值

$it.css('webkitAnimationPlayState', 'running'); 

演示：小提琴

Answer 2

If you want to pause an animation (and then resume from the point that it was paused) you could toggle it's play state with this CSS property:

.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}

You could then use jquery to toggle the paused class:

$(".info").click(function(){
    $it = $(this).closest(".thing");
    $it.toggleClass("paused");
});

Answer 3

$it 是一个数组。所以如果它只包含一个元素，你可以这样做，

$it[0].style.webkitAnimationPlayState="running"; 

如果 $it 包含多个元素并且您想将此样式应用于每个元素，那么，

$($it).each(function(){this.style.webkitAnimationPlayState="running";});

Answer 4

您可以使用 jquery元素的CSS 属性来执行此操作。

$(".info").click(function(){
    var $it = $(this).closest(".thing");
    alert($it.text());
    $it.css({"webkitAnimationPlayState":"running"}); 
});

演示：