Cross-browser jQuery animação transição?

Question

Existem jQuery 1.3 de animação-transições que o trabalho no Firefox 3 e IE7?

Eu tenho uma tabela com várias linhas da tabela (25 ou mais), com algumas das linhas de partida escondida (essas linhas compartilham uma classe comum; neste exemplo, é ".hidden"). No cabeçalho da tabela é um link "Mostrar mais" que está ligado via .click () para uma função que irá mostrar as linhas ocultas, e, em seguida, mudar o "Show mais" para "Mostrar menos" e altere o .click () para uma função que faz o oposto.

Em cada função .click (), não existe uma linha como

$(this).parents("tbody").children("tr.hidden").show();

com .mostrar () substituído com .hide () para a função "Mostrar menos".

No entanto, se eu tentar substituir o .mostrar () /. Hide () com .fadeIn () /. FadeOut (), o IE processa-lo como quase idêntico ao .Show () /. Hide () exceto que é preciso um minuto para .hide () para entrar em vigor. Sem animação real lá. Inferior no IE, embora ele funciona muito bem Firefox.

Se eu tentar usar .slideDown () /. SlideUp (), é semelhante janky no IE, sendo quase idêntico ao .Show () /. Hide () exceto com um efeito pulsante estranho apenas depois de completar a transição. Firefox 3 engasga com ele também, aparentemente, apenas esquecendo a largura de linha das linhas da tabela que está sendo mostrado e fazendo a coisa toda olhar terrível.

Portanto, animações apenas sugam no IE7? Existe alguma maneira de ter uma graciosa e suave transição, neste caso, que irá trabalhar em ambos os navegadores?

Answer 1

De acordo com a página de compatibilidade do jQuery esse tipo de coisa é um erro e deve ser relatado.

Answer 2

Muitas vezes tendo múltipla, animações simultâneas pode ser difícil para o IE. O motor de Javascript apenas não é em qualquer lugar perto Safari ou Firefox ou Chrome. Isso vale para IE6 e IE7. Eu não tenho trabalhado com o IE8 ainda.

Uma coisa que pode ajudar um pouco, está tendo alturas estáticos definidos nos elementos que você está tentando animar. De uma perspectiva CSS / layout, isso geralmente não é o ideal, mas ... isso permite jQuery para ignorar a tarefa de ter que primeiro compute a altura de cada elemento antes que anima a altura do elemento.

Em geral, você pode abordar animações da mesma forma que faria com uma câmera SLR. (Ficar comigo aqui). Se você está tentando tirar fotos de fogo rápido de um evento esportivo, qualquer fotógrafo recomendaria a configuração do foco, ISO, e à frente da velocidade do obturador de tempo. Desta forma, a câmara não tem que calcular tudo isso entre cada tiro e você pode simplesmente mantenha pressionado o botão do obturador e clique-clique-clique-clique. A-Team estilo.

De qualquer forma, quando se trata de animações, tente pensar em coisas as necessidades JavaScript para calcular para a animação para acontecer. Opacidade, altura, altura computadorizada (elemento de largura + fronteira + estofamento), posição da tela, são todos bons lugares para começar.

Muitas vezes, você pode realmente ver o que jQuery está adicionando no DOM como animações iniciar (usando Firebug ) . Como, em uma animação de opacidade, você pode ver a style = "opacidade: 1;" sendo adicionados logo antes da contagem regressiva para 0 começa.

Answer 3

Eu não seria excessivamente explícita quando se fala de performances entre os navegadores. Francamente, eu vi alguns pesados ??JS animações que vão fazer webkit grito, enquanto FF e IE lidar com isso muito bem.

Você apenas tem que considerar que os navegadores têm diferentes CSS e implementações JS que em algum momento o tornam difícil de apontar o dedo para o culpado por trás de suas performances fracas.

Tome IE. Se você tem um elemento de nível de bloco 4000x4000 e uma 2x2 transparente conjunto gif repetir, cada vez que você tinha, Deus me livre, mova o elemento IE irá redesenhar o gif 2x2 e calcular o alfa para cada um, 2.000 vezes. FF quer armazena em cache o fundo ou tem um redesenho dramaticamente diferente, em ambos os casos as performances são incomparáveis. Ele não disse isso no manual, você apenas tem que ter cuidado como e o que fazer.