Arquivo da tag: firefox

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

Bom isso não é um espanto para desenvolvedor web nenhum :D,  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