$fade - Script de fadeIn e fadeOut

[KaKarotto]

Olá.

Eu queria compartilhar com vocês um código que desenvolvi.

Na net existe vários scripts sobre efeitos fade in e fade out, usando

filtros blends, mudança de cores ou filtros alpha.

Esta é mais uma versão dessa técnica. Utilizei uma forma recursiva usando apenas

uma função. O código é muito útil para

aqueles que não querem utilizar uma biblioteca inteira apenas pra utilizar

apenas alguns efeitos que podem ser feitos rapidamente "a mão".

/*
          Criado e Desenvolvido por Eduardo Ottaviani
          Fórum ScriptBrasil - https://www.scriptbrasil.com.br/forum
          Post: "$fade script de fadeIn e fadeOut"
          url: http://scriptbrasil.com.br/forum/index.php?showtopic=113386
          email: edu.tata@gmail.com
          
          Licença: Pública
          
          Por favor, conserve os comentários, eles não vão pesar no seu
          código e é para seu próprio bem pois se gostar será mais fácil
          me achar. Obrigado =)
        
        */


        function $fade(id, type){

         if(type=="fadein"){
         var n=(typeof arguments[2]!="undefined")?arguments[2]:-10
         var limit=n > 100
         n+=10
         }
         else if(type=="fadeout"){
         var n=(typeof arguments[2]!="undefined")?arguments[2]:110
         var limit=n < 0
         n-=10
         }

         if(limit)
         try{
         $fade_callback()
         return
         }catch(e){return}
         
        document.getElementById(id).style.filter="alpha(opacity="+n+")"
        document.getElementById(id).style.MozOpacity=(n/100)
        document.getElementById(id).opacity=(n/100)
        document.getElementById(id).KhtmlOpacity =(n/100)
        setTimeout("$fade('"+id+"','"+type+"',"+n+")", 100)
        }

----- Parâmetros ------

[id] - Nome do id do elemento: Tipo string.

[type] - Tipo de transição, "fadein" ou "fadeout": Tipo string.

Utilizei uma espécie de overloading para fazer a recursão funcionar, o que

possibilita usar também um terceiro parâmetro:

[n] - Começo da transição da opacidade: Tipo número inteiro.

Portanto, se utilizar a chamada:

$fade("meuDiv", "fadein", 50)

Ele irá começar da opacidade 50 no iE ou 0.5 nos outros navegadores.

Mas é preferível não utilizá-lo, já que raramente é necessário.

Edit: Adicionado função $fade_callback

A função $fade_callback será executada assim que o efeito terminar. Você não precisa usar ela a não ser que queira executar algo após o efeito. Explicação no próximo post.

O código foi feito por mim, então usem a vonts.

Anexei um exemplo de utilização, caso queiram ver na prática.

Akelabraaasssss

_fade.htm

[KaKarotto]

Me foi reportado erro quando usaram o fadeOut. Então eu já consertei o código e está agora com mais uma propriedade chamada $fade_callback. Ela é uma função que será executada assim que o efeito terminar. Se a função $fade_callback não estiver definida, então o código simplesmente terminará.

Anexei um novo exemplo no post inicial usando o método $fade_callback.

Mas a título de curiosidade, deixarei aqui o código para quem não quiser baixar o anexo:

window.onload=function(){
       $fade("imagem", "fadein")
       document.getElementById("imagem").style.visibility="visible"
       }


       // Assim que a imagem aparecer, uso a função callback para
       // fazer ela desaparecer de novo.
       
           $fade_callback=function(){
            if(typeof x=="undefined")
            x=0

            if(x==0){
            $fade("imagem", "fadeout")
            return x++
            }
            
            if(x==1)
            $fade("imagem", "fadein")
            return $fade_callback=null
            }

O código acima usará a propriedade do $fade_callback para fazer a imagem aparecer, desaparecer e aparecer novamente terminando o efeito.

Abraços