[jQuery] 2 animações ao mesmo objecto

[OldMan]

Ora boas,

tenho um objecto (que por acaso é uma div) e estou com dificuldade em conseguir animar essa div com 2 animações diferentes, mas ao mesmo tempo.

$("#div").fadeIn("fast").animate({ "margin-top": "-35px" }, "fast");

Deste modo ele faz primeiro uma e quando acabar faz a outra.

 

[D. Carreira]

Tens uma solução que pode até ser melhor para depois puderes adicionar mais efeitos, que seria teres 2 div's (uma dentro da outra) e depois fazer o fadeIn numa e o marginTop na outra...

Atenção como escreves esses valores, e utiliza a página de ajuda do jQuery (docs.jquery.com) para veres como podes utilizar os parâmetros.

$("#div").animate({    
        opacity: 1,
        marginTop: "-35px"
},2500);

Experimenta este código e diz algo.

 

[OldMan]

Realmente faz sentido meter tudo no animate(), o problema é que pelos vistos ele não gosta.

$("#div").animate({ marginTop: "-35px", opacity: "1" }, "fast" );

Isto funciona se na CSS em vez de ter "display: none" (como eu queria), tiver "opacity: 0.1".




EDIT: googlei mais um pouco e fui dar aqui onde vi algo como opacity: 'show' que nunca tinha visto, mas que resultou.

EDIT2: de qualquer maneira acabei por ceder e ficou assim:

$("#btn").hover(function(){
	$("#div").animate({ marginTop: "-35px", opacity: "1" }, "fast" );
},
function(){
	$("#div").animate({ marginTop: "-70px", opacity: "0" }, "fast" );
});

E na css em vez de display: none estou a usar opacity: 0. O que acontecia é que ele animava o primeiro, mas o segundo não. Assim já funciona, obrigado!

 

[masterArt]

provavelmente só o opacity não vai funcionar em todos os browsers.
há pelo menos mais duas propriedades CSS relativas a transparência, para diferentes browsers.

 

[OldMan]

Ainda não me dediquei a tornar o site o mais compatível possível, de qualquer maneira descarto já o meu interesse em incluir o IE6 na minha lista...

 

[D. Carreira]

provavelmente só o opacity não vai funcionar em todos os browsers.
há pelo menos mais duas propriedades CSS relativas a transparência, para diferentes browsers.

Não quero afirmar coisas sem ter a certeza, mas acho que o opacity (e atenção que estamos a falar de utilizar jQuery e não CSS) funciona com o IE6, mas quem tiver o IE6 e que possa responder a isto, seria do agrado de todos.

Já para usar o opacity no CSS com o IE6, seria mais algo assim:

filter: alpha(opacity = 100);