élément jquery à javascript élément

Question

Je travaille donc avec des animations css et javascript vous pouvez commencer une et arrêter un avec le code suivant:

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

maintenant j'ai une Jquery qui ressemble en tant que tel:

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

ma question est dans le commentaire dans le code. Est-ce possible? et comment?

here is a jsfiddle showing how it is not working

Answer 1

Si vous voulez faire une pause d'une animation (puis reprendre à partir du point où il a été mis en pause), vous pouvez l'activer est l'état de lecture avec cette propriété 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; 
} 

Vous pouvez ensuite utiliser jquery pour activer la classe mis en pause:

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

Answer 2

ici $lt est un objet wrapper jQuery, pas un élément dom référence, vous pouvez obtenir la référence de l'élément dom en utilisant l'indice 0

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

Démo: Fiddle

ou utiliser le .css() fourni par jQuery pour définir la valeur de style

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

Démo: Fiddle

Answer 3

$ c'est un tableau. Donc, si elle ne contient qu'un seul élément, vous pouvez le faire,

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

et si $ il contient plus d'un élément et que vous voulez appliquer ce style à chaque élément puis,

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

Answer 4

Vous pouvez utiliser CSS property of jquery élément pour ce faire.

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

DEMO: