Fade IN/OUT com Mootools 1.2

Depois de ter apresentado no meu ultimo post como criar um efeito de fade in/out com scriptaculous, houveram alguns comentários a sugerir mudanças. Comentários que achei bastante válidos e decidi criar algo em mootools 1.2.

O efeito do fade in/out é virtualmente igual ao efeito criado com o scriptaculous, no entanto apresenta algumas vantagens. Uma delas é o tamanho da framework, e outra é o facto de que se o javascript do browser estiver desactivado as caixas de login continuam a aparecer.

Esta é uma das razões pela qual a framework Mootools é uma das minhas preferidas para desenvolver com javascript. No entanto muitas vezes os clientes já possuem soluções implementadas com outras frameworks.

Mas mão na massa!

Passo 1: Javascript

javascript
<script src="mootools12.js" type="text/javascript"></script>

antes de </head> coloque ainda o seguinte código:

javascript
 <script type="text/javascript">
window.addEvent('domready', function() {
    var t = $('divLogin');
 
    $('divLogin').setOpacity(0);
 
    $('mudaopacidade').addEvent('click', function(x) {
        // parar de propagar evento
        x.stop();
 
        t.fade('out');
 
        t.fade('in');
 
        t.fade('toggle');
 
    });
 
});
 
</script>

Passo 2: Código HTML

html
<div class="qualquercoisa"><a href="#" id="mudaopacidade">Login</a></div>
<div id="divLogin" >Nick <input name="" type="text" />    Password <input name="" type="text" />
</div>

Passo 3: 

Posicione os elementos à sua escolha com CSS


Possui ideas para implementar no script? Ou ideias para novos efeitos? Partilhe-as comigo.... Pode aproveitar ainda para subscrever o FeedRSS.

TrackBack URI for this entry

Mário Andrade Outubro 31, 2008 http://muiomuio.com	Bom tutorial :)