Arquivos de sites

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