change CSS keyframe via jQuery

Question

change CSS keyframe via jQuery

Asked 6 years, 11 months ago

Viewed 153 times

0

I’m trying to change one keyframe CSS, actually do an update, but I’m not getting concatenar variables CSS à javaScript.

To ideia, actually, it’s not even changing. But yes, inserir no final do keyframe the lines created

How to fix this?

       tMin = 0;
       tMax = 20;
       tempoImagens = 20;

       $("@keyframe animacao").css({        

          tMin + "% : margin-left:-" + tempoImagens + "%",
          tMax + "% : margin-left:-" + tempoImagens + "%"   

       });

You are giving error in concatenation.

   tMin + "% :

Have you already tested this? Pq the jQuery returns error by placing an arroba (@) in the selector: $("@animation keyframe")

– Sam

2017/10/25 at 10:53
Yes, it was a mistake. But it replaces it for $("<style>@keyframe played"). css(, and the error passed, but the keyframe is not being populated.

– Carlos Rocha

2017/10/25 at 10:56
Instead of doing . css({ various lines }), try in the simple way . css('style','value')

– Sam

2017/10/25 at 10:59
It is not possible because I do not know what values will be used or how many images will be placed. I just need to figure out a way to make that keyframe work. I mean, popular it,

– Carlos Rocha

2017/10/25 at 11:00
Good, but in this multi-line format of . css() you won’t be able to concatenate on the left side of :...

– Sam

2017/10/25 at 11:03
Actually I already got it, no error in the browser. But the keyframe is not being populated

– Carlos Rocha

2017/10/25 at 11:04

Show 1 more comment

1 answer

Browser other questions tagged javascript jquery css css3

You are not signed in. Login or sign up in order to post.

by user103551 · Answer 1 · 2018-01-31T13:40:21+00:00

This is because you are creating a variable and setting its initial value as an integer. So when you try to concatenate, the interpreter "thinks" that you are trying to add up, then it gives error, like: "HOW TO ADD 20 + 'text'".

Instead of putting this:

tMin = 0;
tMax = 20;
tempoImagens = 20;

Put this on:

tMin = "0";
tMax = "20";
tempoImagens = "20";

Or you can also convert the value from integer to text before trying concatenation!