Mudança de cor de fundo suave. Como alterar a cor do plano de fundo: após a pseudoclasse com jQuery? jquery mudar de cor

Nesta lição, falaremos sobre o efeito em que há uma mudança suave no fundo de um objeto ao passar o cursor do mouse sobre ele.
No começo, como você provavelmente já se acostumou (caso não esteja usando a biblioteca jQuery pela primeira vez), incluímos jQuery em nosso site.
Além do próprio jQuery, também precisamos do jQuery UI .

Se você está familiarizado com os princípios do jQuery, então você deve se lembrar que no cabeçalho devemos colocar o código de chamada, neste caso, a animação de mudança de cor, para que ela carregue antes que o conteúdo principal da página carregue. $(document).ready(function() ( // coloque seu código de chamada de animação aqui ));

HTML

Aqui está um exemplo de marcação html.

Alterar a cor de fundo de um elemento Animação da mudança de cor ao passar o mouse / jogo para PC / Portal 2 Portal 2

O Portal original já é uma coisa cult e inesperada para a época. Apenas confirma mais uma vez a tese, comprovada ao longo dos séculos, sobre o triunfo das ideias sobre as tecnologias avançadas.

CSS

O estilo CSS da nossa página se parece com isso.

png); alinhamento de texto: esquerda; cor:#333; largura: 800px; tamanho da fonte: 14px; font-family:georgia, "time new romances", serif; margem:0 automático; preenchimento: 0; ) a( color:#333; text-decoration:none ) a:focus ( contorno: nenhum; ) h1 ( font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:- 2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; ) h2 ( font-size: 24px; font-family: verdana, helvetica, arial, sans- serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a( font-size:14px; font-family:verdana, helvetica, arial , sem serifa; espaçamento entre letras:-1px; cor:#333; peso da fonte: 700; transformação de texto:maiúsculas; margem:0; preenchimento:8px 0 8px 0; ) p ( color:#333; float: esquerda; altura da linha:22px; margem:5px; padding:0 0 10px; ) #container ( margin: 0; padding: 0; ) .boxes ( background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100%; ) .block ( color:#0066CC; flutuar:esquerda; estouro: oculto; posição:parente; largura: 600px; ) .block h4, .block h4 a( color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:maiúscula; )

js

O elemento DIV com a classe .boxes é o elemento, a caixa, cuja cor queremos alterar.
Este é o código que chamaremos no cabeçalho.

$(document).ready(function()( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ), function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Os parâmetros backgroundColor definem a cor e o valor 800 é a velocidade da animação.

Existe uma camada com texto e um botão, ao clicar, você precisa alterar a cor do texto desta camada.

Alterar cor (jQuery) $(document).ready(function()( $("#color_change").click(function()( $("#layer").css("color", "#F00"); )) )); #layer (border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;) Vou revelar a imagem inteira para você e explicar o que exatamente esse homem que descobriu a verdade , a quem eu chamaria de arquiteto de uma vida feliz, disse. Com efeito, ninguém rejeita, despreza, evita os prazeres apenas porque são prazeres, mas apenas porque aqueles que não sabem como se entregar razoavelmente aos prazeres sofrem muito. Assim como não há ninguém que ame, prefira e deseje o próprio sofrimento apenas porque é sofrimento, e não porque às vezes surgem tais circunstâncias quando o sofrimento e a dor trazem algum e não pequeno prazer. Para usar o exemplo mais simples, quem de nós se envolveria em qualquer tipo de exercício físico doloroso, se não trouxesse algum benefício? E quem poderia censurar justamente aquele que busca o prazer, que não traria nenhum problema com ele, ou aquele que evitaria tal sofrimento, que não traria nenhum prazer com ele?

Hoje vamos aprender como fazer uma mudança suave de cor de bloco usando CSS e jQuery. Com este plug-in, você pode obter resultados de design incrivelmente bonitos. Por exemplo, você pode criar um menu legal que muda de cor suavemente ao passar o mouse e, acredite, fica muito bom.

jQuery

Para começar, entre as tags e você precisa colocar o seguinte:

Em seguida, novamente entre as tags e copie este script:

$(document).ready(function()( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ), function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));

Onde .Box é a classe box que criamos acima em CSS.

"#FF4500" é a cor do foco. 400 - velocidade de animação flutuante.

"#ffffff" - a cor original após remover o cursor. 400 - velocidade da animação quando o cursor é removido.

HTML

Depois de fazer tudo conforme descrito acima, a cor do bloco mudará suavemente. Para inserir tal bloco na página, você só precisa adicionar o seguinte no lugar certo:

E o bloco aparecerá.

Importante

Este plugin só pode alterar a cor de fundo (background). Por exemplo, não será possível anexá-lo a links ou texto. A cor dos links é alterada por outro plug-in (com certeza escreverei como fazer isso em breve).

Se você quiser fazer com que os blocos da página tenham cores diferentes, como o meu, você precisará colocar vários scripts seguidos entre as tags e, portanto, não se esqueça de alterar a cor para a desejada. O mais importante é mudar a classe, por exemplo, no nosso exemplo acima - a classe Box, e o próximo script deve ser com uma classe diferente, por exemplo Box1 , depois Box2 e assim por diante.

É isso, queridos amigos. Se você não entender alguma coisa, não deixe de perguntar nos comentários. Vejo você em breve.

De alguma forma, diante da necessidade de escrever o efeito do texto fluindo de uma cor para outra, de repente descobri por mim mesmo que essa não é uma tarefa tão trivial.

Você só pode deixar uma marca de seleção ao lado de Effects Core. É este módulo que estende o método jQuery.animate() que precisamos, basta incluir o assembly baixado:

Depois disso, a cor do texto, quadro ou plano de fundo de qualquer elemento da página fica disponível para animação.

Etapa 2. Atraso entre as animações dos elementos.

Agora que está tudo em ordem com a animação, existe um segundo recurso que complica a tarefa - fazer um atraso entre a animação dos elementos da coleção.

Digamos que temos uma coleção de itens de lista ordenados:

Var $elementos = $("ol > li");

A animação de cada próximo elemento da coleção deve começar com um certo atraso após o anterior.

Você pode obter o resultado desejado usando o seguinte código:

Para (var i = 0; i

Observe que setTimeout() recebe uma função que retorna outra função como primeiro parâmetro.

Se isso não for feito, então a variável i será passada por referência, e quando a função timer chegar, i terá seu último valor igual a $elements.length , pois a essa altura o loop for já terminou e a animação irá não seja executado de forma alguma.

Usando uma função aninhada, copiamos o valor de i a cada iteração do loop, com a ajuda da qual alcançamos operação correta concebida.

conclusões

Você pode usar essa animação, por exemplo, para mostrar que em alguma lista de parâmetros você deve selecionar pelo menos um, ou simplesmente para chamar a atenção para algum bloco da página.