-1

Estou tentando alterar um keyframe CSS, na verdade fazer um update, mas não estou conseguindo concatenar variáveis CSS à javaScript.

A ideia, na verdade, nem é alterar. Mas sim, inserir no final do keyframe as linhas criadas

Como corrigir isso?

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

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

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

       });

Está dando erro na concatenação.

   tMin + "% : 
7
  • Vc já testou isso? Pq o jQuery retorna erro ao colocar uma arroba (@) no selector: $("@keyframe animacao")
    – Sam
    Commented 25/10/2017 às 10:53
  • Sim, de fato deu erro. Mas substitui para $("<style>@keyframe tocaSlide").css(, e o erro passou, porém o keyframe não está sendo populado. Commented 25/10/2017 às 10:56
  • Em vez de fazer assim .css({ vária linhas }), tenta do modo simples .css('estilo','valor')
    – Sam
    Commented 25/10/2017 às 10:59
  • Não dá pois não sei os valores que serão utilizados nem quantas imagens serão colocadas. Só preciso arranjar uma forma de fazer esse keyframe funcionar. Isto é, popular ele, Commented 25/10/2017 às 11:00
  • Bom, mas nesse formato de múltiplas linhas do .css() vc não irá conseguir fazer concatenação do lado esquerdo do :...
    – Sam
    Commented 25/10/2017 às 11:03

2 Respostas 2

-1

Isso acontece porque você está criando uma variável e setando seu valor inicial como inteiro. Daí quando você tenta concatenar, o interpretador "acha" que você está tentando somar, daí ele dá erro, tipo: "COMO SOMAR 20 + 'texto'".

Ao invés de colocar isso:

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

Coloque isso:

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

Ou você também pode converter o valor de inteiro para texto antes de tentar a concatenação!

1
  • Acredito que isso não aconteça porque ao haver uma string em meio a declaração, o interpretador assume como concatenação. Ex: ""+ 5 + 10 == "510"; Commented 31/01/2018 às 14:06
-2

A sugestão é que você redefina o keyframe o sobrescrevendo em uma nova tag style via jQuery:
Esse método sobrescreve a keyframe inicial, portanto primeiro pegue seu css inicial e defina ele numa variável para manter a salvo

Tente assim

  • Copie o css da keyframe que você tem inicialmente, apenas a parte que define a porcentagem e seu conteúdo, remova a quebra de linhas, deixando tudo em uma linha e guarde em uma variável de texto.
  • Defina uma outra variável de texto para os novos valores e insira o código que você já tem para essa keyframe, então incorpore o que você quer incluir.
  • Agora criaremos outra variável de texto contendo o corpo do novo style,
  • Feito isso é só adicionar o novo style no body do seu site.

    Ao final, deverá ter algo assim:
var tMin = 0;
var tMax = 20;
var tempoImagens = 20;

var inicial = "x% {top:0px;} y%{top:50px;}";/*seu css de keyframes inicial*/

var novo = inicial;
novo += tMin+"% {";
novo += "margin-left:-" + tempoImagens + "%";
novo += "}";
novo += tMax+"% {";
novo += "margin-left:-" + tempoImagens + "%";
novo += "}";

var base = "<style>@keyframes animacao {"+novo+"}</style>";
$('body').append(base);

O que deu errado na sua tentativa:
Primeiramente: A interpretação está errada no uso do método .css() para múltiplas entradas;
Esse método espera como entrada o seguinte formato:

$.css({
   "propriedade": "valor",
   "outra-proriedade": "outro-valor"
});

Veja, também, que você está definindo [início]: "propriedade":"valor"
Isso por si só já viola o formato básico da estrutura de definição de uma keyframe:

[início] {
   "propriedade": "valor";
   "outra-proriedade": "outro-valor";
}
[...]
[fim] {
   "propriedade": "valor";
   "outra-proriedade": "outro-valor";
}

Outra coisa: Você está definindo keyframes no singular. https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

1
  • Deixei esse comentário na pergunta, veja se de alguma forma ajuda em sua resposta. Commented 22/06 às 0:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .