1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[jQuery] 2 animações ao mesmo objecto

Discussão em 'Web Development' iniciada por OldMan, 15 de Julho de 2009. (Respostas: 5; Visualizações: 1387)

  1. OldMan

    OldMan Power Member

    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.

    Código:
    $("#div").fadeIn("fast").animate({ "margin-top": "-35px" }, "fast");
    
    Deste modo ele faz primeiro uma e quando acabar faz a outra.
     
  2. D. Carreira

    D. Carreira Power Member

    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.

    Código:
    $("#div").animate({    
            opacity: 1,
            marginTop: "-35px"
    },2500);
    
    Experimenta este código e diz algo.
     
  3. OldMan

    OldMan Power Member

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

    Código:
    $("#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:

    Código:
    $("#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!
     
    Última edição: 16 de Julho de 2009
  4. masterArt

    masterArt Power Member

    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.
     
  5. OldMan

    OldMan Power Member

    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...
     
  6. D. Carreira

    D. Carreira Power Member


    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:

    Código:
    filter: alpha(opacity = 100);
    
     

Partilhar esta Página