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

[Resolvido]jQuery/javascript dúvida

Discussão em 'Web Development' iniciada por unsilent, 12 de Março de 2009. (Respostas: 3; Visualizações: 698)

  1. unsilent

    unsilent Power Member

    Boas,tenho este código:
    Código:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    [COLOR="Red"][B]  <script src="http://code.jquery.com/jquery-latest.js"></script>
      
    <script>
    i=1;
    $(document).ready(function(){
    //=======
    		$("div.overout").mouseover(function(){
    		i = 0;
    		$("div.in",this).animate({opacity: 0.0}, 500);
    		
    		});		
    		
    		
    		$("div.overout").mouseout(function(){
    		i=1;
    		$("div.in",this).animate({opacity: 1.0},500);
    		
    		});
    	
    		
    
    
    //======
    });
    </script>[/B][/COLOR]
      <style>
    div.out {
    width:100px;
    height:80px;
    margin:0 15px;
    background-color:#D6EDFC;
    float:left;
    }
    div.in {
    width:100%;
    height:100%;
    background-color:#FFCC00;
    margin:0px auto;
    }
    p {
    line-height:1em;
    margin:0;
    padding:0;
    }
    </style>
    </head>
    <body>
      
    <div class="out overout">
    <div class="in">
    </div>
    </div>
    <div class="out overout">
    <div class="in">
    </div>
    </div>
    <div class="out overout">
    <div class="in">
    </div>
    </div>
    
    
    </body>
    </html>
    (está ai o html todo só para contextualizar)

    A minha intenção é que o comportamento das div com classe "in" seja similar,ou pelo menos parecido ao deste site:
    http://dragoninteractive.com/
    Ou seja com o evento mouseover a opacity diminui até 0 em x tempo, e com o mouseout aumenta ate 1 em x tempo.

    Agora o problema é que se o user mover o rato n vezes sobre as div's elas vão fazer fade in e fade out n vezes, quando eu só quero que isto ocorra uma vez.Já tentei com vários if's, mas sinceramente faltam-me noções básicas de programação...
    Obrigado desde já.
     
    Última edição: 12 de Março de 2009
  2. p3dro

    p3dro Power Member

    Não sei se percebi bem a tua dúvida, mas tenta alterar para isto as linhas correspondentes:

    $("div.in",this).stop().animate({opacity: 0.0}, 500);


    $("div.in",this).stop().animate({opacity: 1.0},500);
     
  3. unsilent

    unsilent Power Member

    Percebeste. :)
    Obrigado
     
  4. p3dro

    p3dro Power Member

    :x2:
     

Partilhar esta Página