Como adicionar animações de cores com jquery ui efeitos especiais em css3

Video: Como criar efeitos e animações com CSS e Jquery (Parte 01) - Animate.css | CSS #02

Se você deseja executar uma animação cor real em seu aplicativo, você precisa usar o método animate () em CSS3. Este método parece ser um trabalho em andamento porque a documentação para ele não é tão bem escrito como a outra documentação para jQuery UI.

Video: BIBLIOTECA ANIMATE.CSS (CSS3/HTML5/JS)

O método parece funcionar para todas as principais plataformas de destino e navegadores, mas você vai querer experimentar para garantir que ele irá trabalhar para cada navegador que você precisa para atingir. A cor vai realmente fazer a transição neste caso. Também é possível controlar as cores do texto, em grande medida.

O exemplo a seguir mostra as transições mais vulgarmente utilizados. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Animations do código para download como Animate.HTML.)

Video: Animação CSS - Efeito de legenda em imagens (Caption Hover Effects)

$ (Function () {// controlar o estado state.var normais = true - $ ("#ChangeColors") .click (function () {if (Estado) {// definido para o estado alterado. $ ("#Texto de amostra") .animate ({backgroundColor: "# 0000ff",cor: "branco",Cor da borda: "ff0000 #", Altura: 100, width: 600}, 1500) -} else {// definido para o estado normal $ (."#Texto de amostra") .animate ({backgroundColor: "# 7fffff",cor: "Preto",Cor da borda: "# 00ff00", Altura: 50, largura: 400}, 1500) -} // Alterar o state.State = State-})})

Se você está pensando que este código parece que funciona semelhante ao CSS, ele faz, mas o método animate () fornece uma lista significativamente reduzido de recursos que ele pode mudar.

Video: Dica jQuery. Como mudar a cor de fundo background de um elemento

Pode alterar muitas características do texto e o recipiente que mantém, incluindo tanto a largura e altura. No entanto, você não pode mudar coisas como o tipo de fronteira são usados ​​para segurar tudo - mesmo que você pode mudar a cor da borda. A documentação do jQuery UI afirma que animado () suporta as seguintes propriedades:

• cor de fundo

• borderBottomColor

• 
  
  
  

  borderLeftColor

• borderRightColor

• borderTopColor

• cor

• columnRuleColor

• outlineColor

• textDecorationColor

• textEmphasisColor

Os exemplos fornecidos-biblioteca (aquelas fornecidas pelo fornecedor no local do fornecedor) mostram que algumas outras propriedades são suportados, incluindo a largura, a altura e borderColor. Use estas propriedades não-publicado com cuidado. Mesmo que eles trabalham agora, eles podem não ser suportados em futuras versões da biblioteca.