Efeito slideToggle e fadeToggle no jQuery e algumas propriedades
Autor: Bruno Tavares | Publicado: 2011-03-22T20:43:00-07:00

Bom galera vou lhe mostrar um efeito “novo” no blog como ja havia  postado antes o efeito slideToggle, agora vou postar slideToggle e  fadeToggle incluindo alguma das suas propriedades.Vamos ao que interessa…

Demo: AquiComeçaremos pelo efeito fadeToggle…Script:
1234567&lt;script type="text/javascript"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").fadeToggle("slow");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&lt;/script&gt;
Nota:
2ª Linha do código abre um bloco de código dizendo que após executar o documento (A página) poderá ser executado uma ação;
3ª Linha pega o id #conteudo e esconde;
4ª Linha do código abre outro bloco de código dizendo que após   clicar no botão (cujo esta informado pela ID “#botao”)&nbsp; execute o efeito  fadeToggle;
5ª Linha do código informa que o efeito fadeToggle será aplicado ao ID “#conteudo” com uma velocidade “slow”;
O Script mais o html teria que ficar assim…

1234567891011121314151617181920212223242526272829&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Efeito slideToggle no jQuery&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../jquery.js"&gt;&lt;/script&gt;&nbsp; &lt;!-- Inserindo a biblioteca jQuery no seu site --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").fadeToggle("slow");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp;&lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito fadeToggle --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Clique aqui para ver o fadeToggle.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&lt;/body&gt;&lt;/html&gt;
Este é o efeito fadeToggle….
Irei mostrar agora as propriedades do slideToggle e fadeToggle…

1234567891011121314151617181920212223242526272829303132333435&lt;script type="text/javascript"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){ // Inicia o bloco de código&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").hide(); // Esconde o contéudo do #conteudo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").fadeToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Efeito slideToggle ja visto aqui no blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo2").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao2").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito fadeToggle com a propriedade ("fast")[Rápido]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo3").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao3").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo3").fadeToggle("fast"); // Propriedade Fast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito slideToggle com a propriedade ("fast")[Rápido]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo4").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao4").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo4").slideToggle("fast"); // Propriedade Fast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo5").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao5").mouseover(function(){ // Função mouseover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo6").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao6").mouseover(function(){ // Função mouseover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo6").slideToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
Obs: Apesar de parecer muita coisa… não é complicado esse código grande é para vários efeitos diferentes…
Agora irei postar o código do HTML com os scripts…

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Efeito slideToggle no jQuery&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../jquery.js"&gt;&lt;/script&gt;&nbsp; &lt;!-- Inserindo a biblioteca jQuery no seu site --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function(){ // Inicia o bloco de código&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").hide(); // Esconde o contéudo do #conteudo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo").fadeToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Efeito slideToggle ja visto aqui no blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo2").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao2").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito fadeToggle com a propriedade ("fast")[Rápido]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo3").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao3").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo3").fadeToggle("fast"); // Propriedade Fast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito slideToggle com a propriedade ("fast")[Rápido]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo4").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao4").click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo4").slideToggle("fast"); // Propriedade Fast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo5").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao5").mouseover(function(){ // Função mouseover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo6").hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#botao6").mouseover(function(){ // Função mouseover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#conteudo6").slideToggle("slow"); // Propriedade Slow (devagar)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp;&lt;body&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito fadeToggle --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Clique aqui para ver o fadeToggle.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito slideToggle&nbsp; // Ja foi mostrado no blog --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao2" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Clique aqui para ver o slideToggle.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo2" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito fadeToggle Rápido --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao3" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efeito fadeToggle rápido.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo3" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito slideToggle Rápido // Ja foi mostrado no blog --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao4" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efeito slideToggle rápido.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo4" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito fadeToggle Rollover --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao5" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efeito fadeToggle Rollover(mouseover).&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo5" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Efeito slideToggle Rollover // Ja foi mostrado no blog --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="botao6" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Efeito slideToggle Rollover(mouseover).&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="conteudo6" style="float: left; margin-top: 5px;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&lt;/body&gt;&lt;/html&gt;
Espero que gostem e façam um belo uso.
Demo: Aqui