Usando Animate e a biblioteca Easing do jQuery

Olá pessoal, recentemente me aventurei a usar mais um plugin do jQuery ou posso chama-lo de biblioteca auxiliar. Mas antes de dar nomes vamos explicar um pouco mais.

Quando se faz uma animação com jQuery você pode controlar muitos atributos de seu seletor dando a ele “vida” ou seja pode-se move-lo aumentar se tamanho e muitas outras coisas na documentação oficial você pode saber mais. O problema é que estas animação tem início e fim baseadas em milesegundos, ela começa em um ponto e termina de forma regular em outro, por exemplo, se você tem uma div que vai da esquerda para a direita em 1000 milesegundos (que equivale a 1 segundo) então vamos imaginar que ele vai de zero a cem pixel´s e se move. Veja o exemplo abaixo:

Demosntração

A biblioteca easing ajuda a melhorar esta transição, ela faz com que esta div vá do ponto zero ao cem com alguns efeitos de desaceleração, aceleração elásticos e outros muito bacanas, mas é importante anotar que esta biblioteca sobrepõe a biblioteca Animate do jQuery, ou seja muda os parâmetros que a recebe, ou seja, a documentação nos orientará a passar alguns parâmetros mas a biblioteca easing mudará isso.

Vamos aos exemplos práticos para começar, primeiro baixe a biblioteca jQuery e Easing e chame-as no seu arquivo:

E agora chamamos a função que vai fazer a div andar da esquerda para a direita e andar 100 pixel´s, veja como ficará;

<script type="text/javascript">
    $(function(){
        $('#box').animate(
            { marginLeft: 100 },
            1000,
           'easeOutBounce'
        )
    });
</script>

Aqui chamamos a função Animate, e cada vírgula separa os seus parâmetros no primeiro falamos o que vai acontecer, aqui tem muito e comum com o CSS, se você colcoar ali width, heigth, font-size, color vai funcionar também! O segundo parâmetro é o tempo que esta animação vai aocntecer e o segundo é o easing, neste exemplo como um elástico ele vai “rebater” e parar, veja como ficou

Demosntração

É bem simples não na página da biblioteca tem um combo onde você pode testar as animações disponíveis, abaixo a lista completa

Todas as funções/métodos da biblioteca Easing (ease)
easeInQuad	easeInCubic	easeInQuart
easeOutQuad	easeOutCubic	easeOutQuart
easeInOutQuad	easeInOutCubic	easeInOutQuart
easeInSine	easeInExpo	easeInCirc
easeOutSine	easeOutExpo	easeOutCirc
easeInOutSine	easeInOutExpo	easeInOutCirc
easeInBack	easeInBounce	easeInQuint
easeOutBack	easeOutBounce	easeOutQuint
easeInOutBack	easeInOutBounce	easeInOutQuint
easeInElastic	easeOutElastic	easeInOutElastic

Se quiser ver os efeitos em ação veja nos links abaixo e também a documentação completa.

Biblioteca do Easing

Exemplo do Easing

Até mais

Adriano Meira

Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Nome:

Email:

Site:

Mensagem:

BBCode

Comentários (8)

Rodrigo disse:

20/11/2012 às 14:59

pode me ajudar? não consigo aplicar nenhum efeito.

quando clico o easing deveria fechar, fecha mas abre novamente.

Obrigado.

$(document).ready(function () {

$(‘#categorias a.item’).click(function () {

//slideup or hide all the Submenu
$(‘#categorias li’).children(‘ul’).slideUp(‘slow’);

//remove all the “Over” class, so that the arrow reset to default
$(‘#categorias a.item’).each(function () {
if ($(this).attr(‘rel’)!=”) {
$(this).removeClass($(this).attr(‘rel’) + ‘Over’);
}
});

//show the selected submenu
$(this).siblings(‘ul’).slideDown(‘slow’);

//add “Over” class, so that the arrow pointing down
$(this).children(‘a’).addClass($(this).children(‘li a’).attr(‘rel’) + ‘Over’);

return true;

});

});
Adriano Meira disse:

20/11/2012 às 23:27

Olá Rodrigo

Neste código vi uma falha que é o seguinte, ao clicar no último elemento se nenhum aberto ele abre de novo, não tem uma checagem para ver se este elemento está aberto. Fiz um código para você mais enxuto e estou atribuindo o clique dos menus de sub-categoria na “li” e não na classe “a.item” e deixei como extra colocar uma classe chamada “ativo” após clicar na “li”, assim você pode trabalhar o seu CSS para mostrar ao usuário que o item foi selecionado, deixo o código de javascript e o código de HTML para testar, veja nos comentários e se tiver dúvidas poste aqui!

$(document).ready(function () { $('#categorias li').click(function(){ //Guarda em variáveis os seletores. var subCategoria = $('ul', this); var clicado = subCategoria.css('display'); //checa se o menu clicado está caberto ou fechado. if(clicado=='none'){ //Se tiver fechado, feche qualquer elemento aberto. $('#categorias li ul').slideUp(300); //E abra o elemtno UL a partir deste clique. $('ul', this).slideDown(300);
/* * EXTRA - acrescenta uma classe no elemento clicado */ $('#categorias li').removeClass('ativo'); $(this).addClass('ativo'); }else{ //Se o clicado tiver aberto apenas feche-o. $('ul', this).slideUp(300);
/* * EXTRA - remove a classe se tiver aberto */ $(this).removeClass('ativo'); } }); });

E aqui o HTML

<ul id="categorias"> <li><a href="#" class="item" rel="nofollow">Item Um</a> <ul style="display:none;"> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> </ul> </li> <li><a href="#" class="item" rel="nofollow">Item Dois</a> <ul style="display:none;"> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> </ul> </li> <li><a href="#" class="item" rel="nofollow">Item Treês</a> <ul style="display:none;"> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> <li><a href="#" rel="nofollow">Lorem Ipsum</a></li> </ul> </li> </ul>

Até Mais.
Israel disse:

24/03/2014 às 16:47

Boa tarde Adriano,

Cara, você poderia me ajudar, estou precisando fazer um slide desse tipo “http://codecanyon.net/item/saloon-the-jquery-banner-rotator-plugin/full_screen_preview/1629896?ref=themespotters” onde eu tenho um background e div com textos tem uma animação, e possivel fazer com jquery easing

Cara, desde já agradeço
Adriano Meira disse:

26/04/2014 às 12:45

Olá Israel

Fazer do zero um slider como este é um bocado complicado, uma dica é comprar o slider e poupar tempo, outra é tentar algum desses abaix:

http://unslider.com/

http://wowslider.com/

http://designinstruct.com/roundups/jquery-slider-plugin-responsive/

Até mais!
Carlinhos disse:

09/05/2014 às 20:38

Olá Adriano. Em primeiro lugar parabéns pelo trabalho, tem agregado muito. Talvez você possa me ajudar, pois não e tendo muito de javascript e jquery. Estou tentando fazer com que divs com conteudo apareçam chamadas por um menu. Até ai tudo bem, eu clico no bt 1 e a div 1, entra normalmente com animate. O que preciso é que aoclicar em um bt, a div que estiver em cena volte para seu estado inicial, ou seja….e mais ou menos um slider de divs. Espero ter sido claro. Um abraço. Obrigado.
Adriano Meira disse:

10/05/2014 às 11:58

Olá Carlinhos, cara é bem simples até, basta no seu botão colocar um evento que volte sua DIV para o estado normal, por exemplo:

<button class="fechar-div" role="#id-div">Fechar</button>

Este botão eu coloquei um atributo camado role só para referênciar a DIV que ele está, assim no javascrtip eu aciono esta classe e pego seu atributo “role” para poder fechar a div, ficando assim:

$('fechar-div').click(function(){ //pega o valor ro "role" como parâmeto para a div que vai fechar var pega_div = $(this).attr('role'); //Aqui você pode usar algum efeito de jquery como no post $(pega_div).hide(); });

Acho que com isso posso lhe ajudar, até mais!
Carlinhos disse:

10/05/2014 às 15:49

Olá Adriano… Obrigado por responder. Bom, o script não rolou… ou não expliquei bem pu estou fazendo algo errado. Um exemplo mais prático. Tenho 3 botões e para cada um, uma div que será apresentada. Ao clicar no bt um, entra a div um… se eu clicar agora no bt 3, por exemplo, sai a div um e entra a 3… são duas ações no mesmo bt…tirar a div que está no palco e colocar a div correspondente. Desculpe pelo incômodo. Obrigado.
Adriano Meira disse:

11/05/2014 às 22:36

ha ta sim da forma que expliquei não daria mesmo, isso funcionará como uma “sanfona”, veja este artigo meu: http://www.adrianomeira.com/blog/menu-acordeon-sanfona-com-jquery ai basta adaptar para seu código.

Até mais!