Depois de passar muito tempo depurando por que meu jQuery animate() chamadas pararam de funcionar corretamente, percebi que meu problema era as propriedades no animate() A chamada deve estar em uma ordem específica. Então, o seguinte não trabalhe corretamente:
$("div.example").animate({left: 50, top: 100, opacity: 1});
O que vai acontecer é o div.example desaparecerá (se ainda não era) e será apenas apareça na posição esquerda: 50, superior: 100, não será animado. Para que isso funcione conforme o esperado, você deve reordenar:
$("div.example").animate({opacity: 1, left: 50, top: 100});
Eu testei isso no FF4 e no Chrome. Isso me surpreendeu, pois eu nem sabia que a ordem garantida de propriedades do Javascript nos objetos e o jQuery não menciona esse requisito em seus documentos. Portanto, minha pergunta é basicamente: estou fazendo algo errado? Isso é esperado? qual é a ordem correta? Isso funcionará corretamente em todos os navegadores?
Também estou usando a interface do usuário do jQuery. Sei que isso aprimora o método de animação padrão para permitir a animação de cores e outras coisas. Esse é potencialmente o problema?
Respostas:
1 para resposta № 1Este é um bug do jQuery: não pode animar posição e opacidade ao mesmo tempo mas é fixado em 1.6.1
Enquanto isso, você pode corrigi-lo adicionando "px" no final:
$("div.example").animate({top: "100px", left: "50px", opacity: 1});
0 para resposta № 2
Suas propriedades left e top são declarados anteriormente em css? Alguns navegadores (webkit, se bem me lembro) têm problemas para animar propriedades que não foram declaradas. Tente configurar left e top para 0 ou alguns outros valores e veja se funciona.