Arquivos de sites

jQuery – O método unbind()

No capítulo anterior, nós usamos o método bind() para inscrever a eventos com jQuery. No entanto, você pode precisar remover essas inscrições novamente por vários motivos, para prevenir o manipulador de eventos seja executado uma vez que o evento ocorra. Nós fazemos isso com o método unbind(), que em sua forma mais simples se parece com isso:

$("a").unbind();

Isso irá remover quaisquer manipuladores de evento que você tenha anexado com a função bind(). Porém, você pode querer remover apenas inscrições de evento de um tipo específico, por exemplo clicks e doubleclicks:

$("a").unbind("click doubleclick");

Simplesmente separe os tipos de evento com espaço. Aqui esta um exemplo mais completo, onde você pode ver isso tudo em ação:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                $("a").unbind("click");
                alert("First and only message from me!");
        });
});
</script>

Neste pequeno exemplo, nós inscrevemos o evento de click a todos os links. Porém uma vez que o link é clicado, nós removemos todas as inscrições e alertamos o clicador sobre isso. O manipulador de evento não será mais ativado pelos links.

jQuery permite você se inscrever ao mesmo tipo de evento mais de uma vez. Isso pode vir a calhar se você quiser o mesmo evento faça mais de uma coisa em diferentes situações. Você faz isso chamando o método bind() para cada vez que você quer anexar um pedaço de código para isso, assim:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                alert("First event handler!");
        });
        
        $("a").bind("click", function() {
                alert("Second event handler!");
                $("a").unbind("click");
        });
});
</script>

Porém, abre-se para a possibilidade de uma vez que você desvincule um evento, você pode estar removendo inscrições de evento usado todo em um outro lugar do seu código, que você ainda precisa. Se você tentar o exemplo, você vai ver o resultado disso – quando você clica em um link, todos as inscrições de evento são removidas. jQuery permite que você especifique um argumento secundário, que contém uma referencia a um manipulador específico que você gostaria de remover. Desse jeito, nós podemos ter certeza que nós apenas removemos a inscrição de evento que nós pretendíamos. Aqui está um exemplo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        var handler1 = function() 
        {
                alert("First event handler!");
        }
        
        var handler2 = function() 
        {
                alert("Second event handler!");
                $("a").unbind("click", handler2);
        }
        
        $("a").bind("click", handler1);
        $("a").bind("click", handler2);
});
</script>

Especificando handler2 como parâmetro secundário, apenas esse manipulador de evento específico é removido. Tente o exemplo. A mensagem secundária é apenas mostrada a primeira vez que você clicar no link.

Fonte: jquery-tutorial.net

jQuery – Introdução à eventos (events) – O método bind()

Introdução à eventos (events)

Eventos em JavaScript são geralmente alguma coisa onde você escreve um pedaço de código ou um nome de uma função dentro de um atributo de evento em uma tag HTML. Por exemplo, você pode criar um evento para um link escrevendo um código assim:

<a href="javascript:void(0);" onclick="alert('Hello, world!');">Test</a>

E claro isso ainda é perfeitamente válido quando se usa jQuery. Porém, usando jQuery, você pode vincular código a um evento de um elemento ainda mais fácil, especialmente em casos onde você quer anexar funções anônimas ou usar o mesmo código para múltiplo eventos, ou ainda o mesmo código para múltiplos eventos de múltiplos elementos. Com por exemplo, você pode vincular o mesmo evento para todos os links e tags span no seu documento, com apenas algumas linhas de código assim:

<script type="text/javascript">
$(function()
{
        $("a, span").bind("click", function() {
                alert('Hello, world!');
        });
});
</script>

Nós usamos o método bind, que é essencial quando trabalhamos com eventos e jQuery.

O método bind()

Um dos aspectos mais importante de lidar com eventos através do jQuery são os métodos bind() e unbind(). Como o nome sugere, eles vão simplesmente anexar e desanexar código a um ou vários eventos em um conjunto de elementos. Nós vimos um exemplo de uso muito simples do método bind() na introdução à eventos, e aqui está um mais completo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
$(function()
{
        $("a").bind("click", function() {
                alert($(this).text());
        });
});
</script>

Isso funciona selecionando todos os links (elementos <a>) e então vinculamos a função anônima que você vê ao evento click. Uma pequena característica legal é que o jQuery irá automaticamente atribuir o elemento que é clicado, à palavra-chave “this” dentro da função anônima. Isso irá permitir você acessar o elemento que ativa o elemento, mesmo quando você atribuir o mesmo código para múltiplos elementos.

Quando o jQuery chama seu método, ele irá passar informação sobre o evento como primeiro parâmetro, se você especificou um ou mais parâmetro nele. Por exemplo, o objeto de evento passado irá conter informação sobre onde o cursor do mouse está, qual tipo de evento é, qual tecla do teclado ou botão do mouse foi apertado (se algum) e muito mais.
Você pode ver todas as propriedades e métodos do objeto de evento aqui: http://api.jquery.com/event.which/

Aqui está um exemplo:

<div id="divArea" style="background-color: silver; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
$("#divArea").bind("mousemove", function(event)
{
        $(this).text(event.pageX + "," + event.pageY);
});
</script>

Nós criamos um elemento div de um tamanho razoável e uma cor de fundo. Para essa div, nós vamos subscrever ao evento mousemove, com uma função anônima com um parâmetro chamado “event”. Esse objeto nos dá acesso as propriedades pageX e pageY, que nos diz onde na página o cursor do mouse está atualmente, referente ao canto superior esquerdo do documento. Tente o exemplo e mova o cursor sobre o elemento div e você verá as coordenadas atualizadas conforme você move o mouse.

O método bind() também permite você passar dados por contra própria e acessá-lo pelo objeto de evento. Isso também permite você atribuir valores na hora que você vincular o evento, e estar apto para ler esse valor na hora que esse evento é invocado, apesar de a variável original que você usou pode ter mudado. Aqui está um exemplo onde você pode ver isso:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", { message : msg }, function(event) {
                msg = "Changed msg";
                alert(event.data.message);
        });
});
</script>

Nós passamos o valor como parâmetro secundário do método bind(), como um mapa do tipo chave-valor. Você pode passar mais de um valor separando eles por vírgulas. Para acessar o valor dentro do event handler, nós usamos a propriedade de dados do objeto evento. Essa propriedade contém sub-propriedades para cada um dos valores que você passou, que significa que você pode acessar o valor do parâmetro “message” usando evento.data.message.

Apesar do fato que nós mudamos o valor da variável “msg” dentro do event handler, a mensagem mostrada será ainda “Hello, world!” toda vez que você clicar em um dos links, porque é avaliada assim que o event handler está vinculado, que é depois que a página foi carregada.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Os métodos remove() e empty()

Nos últimos dois capítulos, nós trabalhamos com adicionando novos elementos a uma página, mas claro que o jQuery pode ajudar você a remover eles também. Existem principalmente dois métodos para isso: remove() e empty(). O método remove() irá deletar o(s) elemento(s) selecionado(s), enquanto o método empty() irá apenas deletar todos os elementos filhos do(s) elemento(s) selecionado(s). O seguinte exemplo deve ilustrar a diferença – tenha certeza de clicar os links na ordem certa:

<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();">empty() div</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').remove();">remove() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b>
        <i>Italic text</i>
</div>

O primeiro link irá chamar o método empty() na nossa div de teste, removendo todos os elementos filhos. O segundo link irá remover a div inteira, incluindo qualquer elemento filho. Coisa muito simples.

O método remove() vem com um parâmetro opcional, que permite você filtrar os elementos a serem removidos, usando qualquer uma das sintaxes dos seletores do jQuery. Você pode com certeza realizar o mesmo simplesmente fazendo o filtro no seu primeiro selector, mas em algumas situações, você pode estar trabalhando com um conjunto de elementos já selecionados. Veja esse exemplo disso em uso:

<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');">remove() more bold</a>
<div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b><br />
        <b>More bold text</b><br />
        <b>Even more bold text</b><br />
</div>

Nós começamos selecionando todas as tags bold (negrito) dentro da nossa div de teste. Nós então chamamos o método remove() nos elementos selecionados, e passamos no filtro “.more”, que irá certificar-se que nós apenas peguemos elementos que usam a classe “more”. Como resultado, apenas os últimos dois textos em negrito serão removidos.

Você pode com certeza usar ainda seletores mais avançados como filtro também. Dê uma olhada no tópico “Seletores” para mais inspiração.

Fonte: jquery-tutorial.net

jQuery – Os métodos before() e after()

No capítulo anterior, nós usamos os métodos append() e prepend() para inserir coisas dentro de um elemento, mas em alguns casos, nós precisamos inserir coisas antes ou depois de um ou vários elementos em vez disso. O jQuery tem os métodos befoer() e after() apenas para esse propósito, e eles são tão fáceis de usar. Veja esse exemplo:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>
<br /><br />
<input type="text" value="Input 1" name="txtInput1" /><br />
<input type="text" value="Input 2" name="txtInput2" /><br />

Dependendo em qual dos dois links você clicou, uma tag itálico ou uma negrito será inserida antes ou depois de cada elemento input na página usando a classe “test1”. Assim como append() e prepend(), ambos after() e before() permitem você usar strings HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita deles também. Nós vamos demonstrar isso no próximo exemplo:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>
<script type="text/javascript">
function InsertElements()
{
        var element1 = $("<b></b>").text("Hello ");
        var element2 = "<i>there </i>";
        var element3 = document.createElement("u");
        element3.innerHTML = "jQuery!";   
        $("#spnTest2").after(element1, element2, element3);
}
</script>

Neste exemplo, nós criamos um objeto jQuery, uma string HTML e um elemento JavaScript DOM, e então nós usamos o método after() para inserir todos eles depois da nossa tag span. Claro, o método before() poderia ter sido usado exatamente da mesma maneira.

Existem variações dos métodos before() e after(), chamados insertBefore() e inserAfter(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então ao invés de os chamarem nos elementos que devemos inserir dados antes ou depois, com um parâmetro do que é para ser inserido, você faz exatamente o oposto. Qual método usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>
<script type="text/javascript">
function InsertElementsBefore()
{       
        $("#spnTest3").before($("<i></i>").text("before() "));
        $("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Neste exemplo, nós inserimos os itens antes da tag span, mas você poderia com certeza fazer exatamente a mesma coisa usando after() e insertAfter(), se você deseja inserir depois do elemento alvo. Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazermos difere.

Fonte: jquery-tutorial.net

jQuery – Pegando e atribuindo classes CSS

Assim como é fácil manipular o conteúdo e atributos dos elementos, como nós vimos no capítulo anterior, é igualmente fácil manipular o CSS dos elementos. O jQuery lhe dá acesso fácil para mudança tanto do atributo de estilo, que você manipula usando o método css(), como a(s) classe(s) de um elemento, onde vários métodos diferentes permitem você modificar isso.

Vamos começar olhando a mudança do atributo class (classe). O atributo class recebe um ou vários nomes de classes, que pode ou não referenciar a uma classe CSS definida no seu stylesheet. Geralmente faz, mas você pode de tempos em tempos adicionar nomes de classes aos seus elementos simplesmente para estar apto para alcançar eles facilmente pelo jQuery, já que o jQuery tem um excelente suporte para seleção de elementos baseado nos  nomes da classe.

Eu defini alguns seletores CSS bem simples no meu stylesheet, principalmente para propósitos de teste:

.bold {
        font-weight: bold;
}
.blue {
        color: blue;
}

No seguinte exemplo nós vamos usar três dos métodos mais interessantes relacionados à classe: hasClass(), que checa se um ou vários elementos já tem uma classe específica definida, addClass(), que simplesmente adiciona um nome de classe a um ou vários elementos e o método removeClass(), que  irá… bem, você provavelmente já adivinhou isso.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>
<script type="text/javascript">
function ToggleClass(sender)
{
        if($(sender).hasClass("bold"))
                $(sender).removeClass("bold");
        else
                $(sender).addClass("bold");
}
</script>

O exemplo é na realidade muito simples. Quando o link é clicado, nós enviamos o próprio link (this) como um parâmetro ao método ToggleClass() que nós temos definido. Nele, nós checamos se o remetente já tem a classe “bold” – se ele tiver nós o removemos, caso contrário nós o adicionamos. Isso é uma coisa muito comum de se fazer, então obviamente o pessoal do jQuery não quer  que nós escrevemos todas essas três linhas de código para isso. É por isso que eles implementaram o método toggleClass(), com o qual nós podemos transformar todo nosso exemplo avima dentro de uma única linha de código:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Com certeza, nós podemos selecionar multiplos elementos, onde nós podemos adicionar ou remover múltiplas classes, também. Aqui está um exemplo disso:

<div id="divTestArea1">
        <span>Test 1</span><br />
        <div>Test 2</div>
        <b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1 span, #divTestArea1 b").addClass("blue");
        $("#divTestArea1 div").addClass("bold blue");
});
</script>

Primeiro nós selecionamos as tags span e a b, a qual nós adicionamos uma única classe para: classe blue. Então nós selecionamos a tags div, que nós adicionamos duas classes, separadas por espaço: classe bold e a blue. O método removeClass() funciona apenas do mesmo jeito, permitindo você especificar várias classes para serem removidas, separadas por espaços.

Fonte: jquery-tutorial.net

jQuery – Parando animações com o método stop()

No capítulo anterior, nós vimos como nós podemos fazer animações customizadas usando o método animate() e como nós podemos ter várias animações depois de cada uma,  fazendo várias chamadas de animações e desse modo usando a fila de animação do jQuery. Porém, algumas vezes você precisa para uma animação antes dela terminar, e para isso, o jQuery tem um método stop(). Ele funciona para todos os efeitos relacionados as funções do jQuery, incluindo o sliding, fading e animações customizadas com o método animate(). Aqui está um exemplo onde nós usamos ele:

<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').stop();">Stop</a>
<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Para fazer o exemplo um pouco mais compacto, eu usei chamadas inline nos eventos onclick dos dois links. Quando você clicar o primeiro link, o método slideDown() é usado no seu elemento div, começando um deslizamento para baixo (slide down) devagar. Um clique no segundo link  irá matar a animação corrente/atual sendo realizada no elemento selecionado. Esse é o comportamento padrão do método stop(), mas dois parâmetros opcionais nos permitem fazer as coisas de forma diferente. O primeiro parâmetro especifica se a fila de animação deve ser limpa ou não. O padrão é false, que significa que apenas a animação ativa será parada, permitindo quaisquer animações enfileiradas sejam executadas mais tarde. O seguinte exemplo demonstrará isso:

<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop();">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);">Stop all</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();">Reset</a>

<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Nós adicionamos uma segunda animação ao link “Show box”. Isso irá deslizar a caixa para baixo devagar, e uma vez terminado, deslizará ela para cima de novo. O sistema de fila garante que esses passo serão executados na sequência. Agora, clique no link “Reset” para ter a caixa escondida de novo e então clique no link “Show box” mais uma vez, seguido por um clique no “Stop”. Você verá que a primeira animação foi parada,seguindo para a segunda animação a ser executada. Porém, se você tentar de novo e clicar no “Stop all” em vez disso, o valor true passado irá garantir que a fila inteira está limpa e que toda animação no elemento está parada.

O Segundo parâmetro diz ao jQuery se você gostaria de que ele apenas parar onde ele está, ou apressar a animação em invés disso, permitindo ele terminar. Isso faz uma grande diferença, porque como você pode ver no primeiro exemplo, uma vez que você aperta stop, o comportamento padrão é simplesmente para a animação onde ela está e deixá-la assim. O exemplo seguinte irá mostrar a diferença:

<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);">Stop but finish</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();">Reset</a>
<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Tente as duas variações do “Stop” – a primeira irá para imediatamente, enquanto a segunda irá apressar a animação para o fim.

Fonte: jquery-tutorial.net

jQuery – Sliding de elementos (Deslizar)

No capítulo anterior, nós vimos como nós podemos exibir ou esconder elementos  usando os métodos fading do jQuery. Porém, algumas vezes um efeito de sliding é uma melhor escolha, e para isso, o jquery tem um conjunto de métodos de combinação para fazer apenas isso. Vamos começar com um simples exemplo dele, onde nós usamos o método slideDown():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").slideDown();
}
</script>

Para esconder a caixa de novo, nós podemos usar o método slideUp(). Ambos recebem o mesmo conjunto de parâmetros, que são todos opcionais. O primeiro parâmetro permite você especificar a duração para o efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que são o mesmo se especificar ou 200 ou 600 milissegundos. Vamos tentar um exemplo onde nós fazemos apenas isso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").slideDown("fast");
        $("#divTestArea22").slideDown("slow");
        $("#divTestArea23").slideDown(2000);
}
</script>

Temos um pouco mais de HTML que o de costume, mas isso está lá apenas para você ser capaz de ver os andamentos diferentes que as caixas são mostradas. Observe como a primeira caixa aparece quase que instantaneamente, a segunda caixa é bem parecida e a terceira caixa é mais devagar, porque ela usou dois segundos inteiros para descer.

Agora, o segundo parâmetro pode ser oir o nome de uma  função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método slideUp():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").slideDown(2000, function()
        {
                $("#divTestArea3").slideUp(3000);
        });
});
</script>

A habilidade para fazer isso pode ser muito útil para combinar vários efeitos, com você pode ver. Neste exemplo, a função de callback que nós fornecemos será chamada assim que o método slideDown() estiver completamente finalizado e então o método slideUp() é chamado.

No caso de você querer simplificar o slide de um elemento para cima ou para baixo dependendo do seu estado atual, os desenvolvedores do jQuery forneceram a nós  um método legal slideToggle() para fazer apenas isso. Veja o próximo exemplo, onde nós usamos ele:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").slideToggle("slow"); 
}
</script>

Fonte: jquery-tutorial.net

jQuery – Fading de elementos (Exibir/Esconder)

Fazer simples animação é muito fácil com jQuery. Um desses efeitos é o fading em um elemento, para exibí-lo ou escondê-lo. Aqui está um simples exemplo, onde nós exibimos uma caixa escondida, usando o método fadeIn():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>

Você pode dar um fade em um monte de elementos diferentes, como divs, spans ou links. O método fadeIn() pode receber três parâmetros. O primeiro permite você especificar a duração do efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que é o mesmo que especificar 200 ou 600 milissegundos. Aqui está um exemplo disso em uso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").fadeIn("fast");
        $("#divTestArea22").fadeIn("slow");
        $("#divTestArea23").fadeIn(2000);
}
</script>

Não se importe com todo o HTML, está lá apenas para que você possa ver a diferença entre as durações do fading. Agora, o segundo parâmetro pode ser o nome de uma função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método fadeOut(), que obviamente tem o efeito reverso do fadeIn():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").fadeIn(2000, function()
        {
                $("#divTestArea3").fadeOut(3000);
        });
});
</script>

Pode ter situações onde você quer esconder ou exibir um element dependendo do estado corrente do mesmo. Você poderia com certeza checar se ele está visível ou não, e então chamar ou fadeIn() ou fadeOut(), mas os desenvolvedores legais do jQuery tem nos fornecido um método específico para alternar (toggling) um elemento, chamado fadeToggle().  Ele leva os mesmo parâmetros como fadeIn() e fadeOut(), então ele é muito fácil de usar. Aqui está um pequeno exemplo:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").fadeToggle("slow");  
}
</script>

E isso é quão fácil é usar os efeitos de fading do jQuery.

Fonte: jquery-tutorial.net