JQuery - o método animate

Um evento muito simples que utiliza
De acordo com a documentação do Jquery a sintaxe é a seguinte:




.animate( properties [, duration] [, easing] [, complete] )

 properties: as propriedades css que serão executadas.
duration : duração da animação em millissegundos podendo usar 'fast' para 200ms e 'slow' para 600ms.
easing: 
complete: callback, evento a ser chamado após o fim da animação.

Exemplo Básico

Digamos que precisamos criar um evento onde ao passar o mouse sobre um label, ele aumentará de tamanho e quando passar o mouse fora ele voltará ao tamanho original.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Exemplo Animate - Jquery</title>
</head>
<body>
  <label id="labelAnimado">Anime-se!</label>
</body>
</html>
No html criamos apenas um label e atribuimos o id "labelAnimado", que é onde usaremos para adicionar os eventos no javascript.

JAVASCRIPT

$(document).ready(function(){
  
  $("#labelAnimado").on("mouseover",function(){
  
    $(this).animate({
      fontSize: '+=7px'
    });
    
  }).on("mouseleave",function(){
  
    $(this).animate({
      fontSize: '-=7px'
    });
  
});
});


Explicação:

Linha 1: Quando a página estiver com o carregamento completo, execute isto.
Linha 3: Atribui o evento "mouseover" no label
Linha 5: Define o animate no elemento. (o this nesse caso é a mesma coisa de #labelAnimado)
Linha 6: Aumento a fonte do label em 7px;
Linha 9: Atribui o evento "mouseleave" (Ao mouse rolar sobre e sair do elemento)
Linha 12: Digo que ele diminua 7px's ao evento ser executado.

O resultado vocês podem conferir no link abaixo:
Exemplo Animate - Jquery

Ler Tudo

Javascript: window.location não funciona com button

Esses dias me deparei com uma coisinha chata, que pra mim não tinha explicação, tentei de todo jeito resolver, dei uma pesquisada e o único modo de resolver o problema era setando o tipo <input type="button"> , infelizmente isso não me ajudou pois eu precisava usar o <button>, então pessoal segue o modo bem simples de como resolver.

A solução


$("#btn").on("click",function(){

window.location = 'pagina.html'
return false;

});

Bem, com esse simples return false resolveu todo meu problema, a explicação ao meu ponto de vista é que depois de executar o location, acho que dava um "submit" no formulário.

Ler Tudo

Category

Category

  • (1)
  • (1)
  • (1)
  • (1)
  • (1)
  • (1)

Category

Category