Animação com jQuery, não funciona como esperado no IE7 IE8.

Bom isso não é um espanto para desenvolvedor web nenhum😀,  todos sabemos o quanto as simples três letras juntas ie6/ie7/ieX são sinonimo de problemas talvez no ie18 seja algo correto! Nossa radicalizeiiiii!!!!! hihihiHAihaHAIaH … bom parece que o ie9 já implenenta até HTML5. Uau! -_-

Evangelizando.

Isso não tem nada a ver com o bug, pode pular para o próximo tópico😉.

É por isso que eu digo, use Firefox, use o Chrome use algo atualizado e seja feliz! Já discuti muito com amigos web-dev’s sobre a questão dos navegadores da raça ieX e o que geralmente dá mais discussão é ele o ie6, pois todos dizem que tem que funcionar no ie6, e eu digo que o ie6 só atrasa com a evolução dos padrões e das novas tecnologias web que podem e vão surgir, justamente porque este navegador não suporta nem as tecnologias básicas de desenvolvimento web como CSS/JS, tipos de imagens etc.

O problema em usar o método da jQuery .animate().

A função .animate() em sua descrição já diz tudo: “.animate(): Executa uma animação personalizada de um conjunto de regras CSS”, com este métodos pode-se desenvolver animações incríveis(exemplos, exemplos e mais exemplos.) para seu site sem a necessidade de utilizar FLASH.

Quando tenta-se utilizar a propriedade ‘position’ dentro das regras de animação no método .animate(), podemos nos deparar com um erro de javascript no navegador ie7/8, indicando um erro em nosso framework jQuery, apontando que a propriedade em questão não é reconhecida pela jQuery, mas como nós sabemos quem não consegue reconhecer a tag é o navegador, achei um post muito interessante onde os web-dev’s falavam sobre a questão da falha da animação no ie7.

Solução

Se o problema é utilizar a propriedade ‘position’ dentro do código js, ex:

$(‘#topicos_desta_secao li’).hover(function(){
$this = $(this);
var bottom = ‘-45px’; //valor default para subir.
if( $this.css(‘height’) == ‘320px’ ){bottom = ‘-115px’;}
$this.css(‘cursor’, ‘pointer’).find(‘p’).stop().find(‘.first’).hide().end().animate({position:’absolute’, bottom: bottom}, {queue:false, duration:300});

.,…..

Não as utilizem, pois o motor de JS do ie7/8 não reconhecem essa propriedade corretamente. A solução é colocar a propriedade ‘position’ dentro da regra CSS do elemento que se quer animar.

.topicos_solucoes li p {
position:absolute;
left:0;
bottom:-178px; color:white;
background-color:#4d4d4d;
height:100%;
padding:30px 10px 0 10px;
}

Simples!!!!

E sem mais blah’s… “é isso ae pessoal”

1 comentário

Arquivado em bugs, css, jQuery, xhtml

Uma resposta para “Animação com jQuery, não funciona como esperado no IE7 IE8.

  1. Flayer

    Excelente artigo, ajudou muito. Abraço!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s