JQuery элемент яваскрипта элемента

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? 
}); 

мой вопрос находится в комментарии в коде. Возможно ли это? и как?

here is a jsfiddle showing how it is not working

Answer 1

Если вы хотите, чтобы приостановить анимацию (а затем возобновить с того, что оно было приостановлено) вы можете переключить его состояние воспроизведения с этим CSS собственности:

.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; 
} 

Вы могли тогда использовать JQuery для переключения приостановленного класс:

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

Answer 2

здесь $lt является JQuery объект обертки, а не дом элемент ссылки, вы можете получить ссылку дом элемент, используя индекс 0

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

Демо: Fiddle

или использовать ползунки .css() обеспечивается JQuery, чтобы установить значения стиля

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

Демо: Fiddle

Answer 3

$ это массив. Так что, если он содержит только один элемент, вы можете сделать,

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

и если $ содержит более одного элемента, и вы хотите применить этот стиль к каждому элементу тогда,

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

Answer 4

Вы можете использовать CSS property of jquery элемент для этого.

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

DEMO: