Menu

Home » Blog » Aprenda a fazer o efeito fade em seu site

Aprenda a fazer o efeito fade em seu site

tutoriais webdesign • 18-02-2014

Olá pessoal. Hoje explico como mostrar e ocultar uma div com efeito fade, ou seja, aparecer e desaparecer lentamente. Anteriormente mostrei como fazer um slide menu responsivo usando jQuery. Para este exemplo, o racioncínio é o mesmo e mudaremos um pouco da função jQuery.

Abaixo você está vendo o resultado do exemplo. Clique no botão para ver o efeito funcionando.

Na aba HTML coloquei um parágrafo, que estou usando como botão e é a div #quadrado que sofre a ação do botão.

Na aba CSS tem a formatação do HTML. Caso tenha alguma dúvida, é só perguntar.

Segue abaixo a explicação da aba JS.

$(document).ready(function(){  Nesta linha estou dizendo, carregue a função assim que todos os elementos HTML estiverem prontos.

$("#botao").click(function(){ Esta linha significa, execute a função assim que o #botão for clicado.

$("#quadrado").fadeToggle("slow"); Esta linha significa, faça o #quadrado aparecer e desaparecer bem devagar.

A função .fadeToggle() é responsável por desaparecer e aparecer a div #quadrado. E o parâmetro "slow" deixa o efeito mais lento.

Bom pessoal, espero que tenham gostado. Curtam a página e até a próxima.



comments powered by Disqus

» Categorias