javascript - switchclass - toggleclass jquery w3schools




animando addClass/removeClass com jQuery (4)

Eu estou usando jQuery e jQuery-ui e quero animar vários atributos em vários objetos.

Por uma questão de explicar o problema aqui eu simplifiquei para um div que muda de azul para vermelho quando o usuário mouses sobre ele.

Eu sou capaz de obter o comportamento desejado ao usar animate() , no entanto, ao fazer isso, os estilos que estou animando têm que estar no código de animação e, portanto, são separados da minha folha de estilos. (veja o exemplo 1 )

Uma alternativa é usar addClass() e removeClass() mas não consegui recriar o comportamento exato que posso obter com animate() . (veja o exemplo 2 )

Exemplo 1

Vamos dar uma olhada no código que tenho com animate() :

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

exibe todos os comportamentos que estou procurando:

  1. Anima suavemente entre vermelho e azul.
  2. Nenhuma animação 'sobrecarregada' quando o usuário move o mouse rapidamente para dentro e para fora da div.
  3. Se o usuário deslocar o mouse para fora enquanto a animação ainda está sendo reproduzida, ela fica mais fácil entre o estado atual de 'meio caminho' e o novo estado de 'meta'.

Mas como as mudanças de estilo são definidas no animate() eu tenho que mudar os valores de estilo lá, e não posso apenas apontar para a minha folha de estilo. Essa 'fragmentação' de onde os estilos são definidos é algo que realmente me incomoda.

Exemplo 2

Aqui está minha melhor tentativa atual usando addClass() e removeClass (note que para a animação funcionar você precisa de jQuery-ui):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

Isto exibe tanto a propriedade 1. como 2. dos meus requisitos originais, no entanto, 3 não funciona.

Eu entendo a razão para isso:

Ao animar addClass() e removeClass() jQuery adiciona um estilo temporário ao elemento e, em seguida, incrementa os valores apropriados até que eles alcancem os valores da classe fornecida, e somente então ele realmente adiciona / remove a classe.

Por causa disso, tenho de remover o atributo style, caso contrário, se a animação for interrompida, o atributo style permanecerá e sobrescreverá permanentemente quaisquer valores de classe, já que os atributos de estilo em uma tag têm maior importância do que os estilos de classe.

No entanto, quando a animação está na metade do caminho, ela ainda não adicionou a nova classe, e assim, com essa solução, a cor salta para a cor anterior quando o usuário move o mouse antes que a animação seja concluída.

O que eu quero idealmente é ser capaz de fazer algo assim:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Onde getClassContent apenas retornaria o conteúdo da classe fornecida. O ponto chave é que desta forma eu não tenho que manter minhas definições de estilo em todo o lugar, mas posso mantê-las em classes na minha folha de estilo.


Como você não está preocupado com o IE, por que não apenas usar transições CSS para fornecer a animação e o jQuery para alterar as classes. Exemplo ao vivo: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Embora a questão seja bastante antiga, estou adicionando informações que não estão presentes em outras respostas.

O OP está usando stop () para interromper a animação atual assim que o evento for concluído. No entanto, usar a combinação correta de parâmetros com a função deve ajudar. por exemplo. stop (true, true) ou stop (true, false), pois isso afeta bem as animações enfileiradas.

O link a seguir ilustra uma demonstração que mostra os diferentes parâmetros disponíveis com stop () e como eles diferem de finish ().

http://api.jquery.com/finish/

Embora o OP não tenha problemas ao usar o JqueryUI, isso é para outros usuários que podem se deparar com cenários semelhantes, mas não podem usar o JqueryUI / precisam suportar o IE7 e o 8 também.


Outra solução (mas requer jQueryUI como apontado por Richard Neil Ilagan nos comentários): -

addClass, removeClass e toggleClass também aceita um segundo argumento; a duração do tempo para ir de um estado para o outro.

$(this).addClass('abc',1000);

Veja jsfiddle: - http://jsfiddle.net/6hvZT/1/


Você poderia usar switchClass do jquery ui, Heres um exemplo:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

Ou veja este jsfiddle .







jquery-animate