jquery element to javascript element

Question

So I am working with css animations, and in javascript you can start one and stop one with the following code:

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

now I have some Jquery that looks as such:

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

my question is in the comment in the code. Is this possible? and how?

here is a jsfiddle showing how it is not working

score 3 · Answer 1 · answered Oct 04 '13 at 05:12

3

here $lt is a jQuery wrapper object, not a dom element reference, you can get the dom element reference using the index 0

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

Demo: Fiddle

or use the .css() provided by jQuery to set the style value

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

Demo: Fiddle

answered Oct 04 '13 at 05:12

Arun P Johny

384,651
66
527
531

thanks...now look at this fiddle: http://jsfiddle.net/zj5G5/11/ ... how come the pause doesn't work? – Ryan Saxe Oct 04 '13 at 05:18
@RyanSaxe it should be like http://jsfiddle.net/arunpjohny/8WQcy/1/ the `on` method should be called in the wrapper element... also it should not be inside the click handler... – Arun P Johny Oct 04 '13 at 05:29
the jsfiddle you gave me does not work... – Ryan Saxe Oct 04 '13 at 05:43

score 0 · Answer 2 · answered Oct 04 '13 at 05:10

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

i'm not trying to pause an animation... – Ryan Saxe Oct 04 '13 at 05:14 — Ryan Saxe, Oct 04 '13 at 05:14

score 0 · Answer 3 · answered Oct 04 '13 at 05:14

$it is an array. So if it contains only one element, you can do,

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

and if $it contains more than one element and you want to apply this style to each element then,

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

score 0 · Answer 4 · answered Oct 04 '13 at 05:15

0

You can use CSS property of jquery element to do this.

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

DEMO:

answered Oct 04 '13 at 05:15

sudhansu63

6,025
4
39
52

jquery element to javascript element

4 Answers4