Efeito usando animate do jquery com o easing

-

Fala galera...!!!

Eu precisei replicar um efeito aprovado num layout da empresa esses dias e tive dificuldades por não ter feito algo parecido antes e os exemplos que encontrei não me davam uma ideia clara.

Então eu fui mexendo daqui e dali e consegui o efeito usando a biblioteca easing do jquery.

Vamos então iniciar baixando o jquery e a biblioteca Easing.

Agora vamos ao código:

Cria um arquivo chamado teste.htm e copia o código abaixo para ele.
Depois cria uma pasta js dentro da pasta onde você criou o arquivo e dentro dela coloque o jquery e a biblioteca.

É simples realizar o efeito, você pode trocar os efeitos, colocar por exemplo theSquare2.toggle(function(){theSquare2.show();});

Enfim...!!! É isso aí, eu não encontrei exemplos legais na net para realizar o efeito que eu queria mas fui juntando o que fui entendendo e montei esse. Espero conseguir ajudar muita gente.

um grande abraço, comentem e deixem as suas opiniões que elas são super importantes e até o próximo post.

Comentários

Postar um comentário

Participe, deixe seu comentário.

Postagens mais visitadas deste blog

Criando uma Variável em ColdFusion e em ASP

-
Em ColdFusion para criarmos uma variável usamos a tag <cfset> , com ela podemos criar variáveis estáticas e dinâmicas. Em coldFusion podemos usar os escopos de variáveis na criação para nos ajudar com a identificação delas. Ex.: <cfset variables.teste = “teste”> A variável que acabamos de criar recebe uma string mas pode receber o conteúdo de outra variável, por exemplo. <cfset variables.teste1 = teste> A variável acima recebe o conteúdo da variável teste, podemos também formatar o conteúdo de uma variável, por exemplo, se a variável for uma data, então temos. <cfset variables.data = LsDateFormat(now(),'dd/mm/yyyy') > A variável acima está recebendo a data local formatada em Dia/Mês/Ano <cfset variables.Dia = NumberFormat(DatePart(“d”,variables.data),”00”)> <cfset variables.Mes = NumberFormat(DatePart(“m”,variables.data),”00”)> <cfset variables.Ano = DatePart(“y”,variables.data)> Os Escopos de variáveis são: ...
Leia mais

O que é ColdFusion? Para que serve?

-
"A maneira mais rápida de desenvolver aplicações web Java”, “A melhor solução para o desenvolvimento de Rich Internet Applications (RIAs)”. Estas são as palavras que descrevem o produto, pela própria Adobe. Imediatamente já temos aí um argumento muito importante para aqueles que comparam o Java (JEE) com o ColdFusion (CFML). Na verdade, o ColdFusion (CFML) é nada mais nada menos do que um Framework para o desenvolvimento de aplicações Java. Ao escrever um arquivo CFML (.CFM) que fará parte da sua aplicação, no momento da primeira leitura do mesmo por parte do servidor, à partir de um request, este arquivo .CFM será compilado e irá gerar um bytecode Java (.CLASS), que será o arquivo a ser processado pelo núcleo Java no ColdFusion a partir dos demais acessos. Desta forma, fica claro que o CFML é simplesmente uma abstração da linguagem Java e tem a sua API disponibilizada em forma de TAGs CFML, afim de produzir ao usuário desenvolvedor, maior rapidez baseada na simplicidade adquirida...
Leia mais

Criando Componentes em CF

-
Imagem
Para criar componentes em CF é muito simples. Vamos levar em conta que estamos na pasta raiz do sistema. Então para não misturar os arquivos vamos criar uma pasta chamada de controle dentro da pasta raiz e criar nosso componente dentro dela. Um arquivo de componente em CF é identificado pela extensão .cfc e vou dar o nome do componente que vamos criar de Documentos.cfc No DreamWeaver você pode criar um novo componente da mesma forma que faz para criar uma nova página em ASP, como mostra a figura abaixo: Para criar nosso componente temos que começar nosso arquivo com a tag <cfcomponent></cfcomponent> No código abaixo eu chamo um serviço COBOL nas funções criadas dentro do componente. <cfcomponent> <!--- Trás a quantidade e lista de documentos ---> <cffunction name="listarDocsRecebidosPorUsuario" access="public" returntype="any"> <!--- Argumentos passados para a função. Deve seguir a mesma ordem ---...
Leia mais