fadeToggle. </div> <div id="conteudo" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> </body></html>Este e o efeito fadeToggle....Irei mostrar agora as propriedades do slideToggle e fadeToggle...1234567891011121314151617181920212223242526272829303132333435<script type="text/javascript"> $(document).ready(function(){ // Inicia o bloco de codigo $("#conteudo").hide(); // Esconde o conteudo do #conteudo $("#botao").click(function(){ $("#conteudo").fadeToggle("slow"); // Propriedade Slow (devagar) }); //Efeito slideToggle ja visto aqui no blog $("#conteudo2").hide(); $("#botao2").click(function(){ $("#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar) }); //efeito fadeToggle com a propriedade ("fast")[Rapido] $("#conteudo3").hide(); $("#botao3").click(function(){ $("#conteudo3").fadeToggle("fast"); // Propriedade Fast }); //efeito slideToggle com a propriedade ("fast")[Rapido] $("#conteudo4").hide(); $("#botao4").click(function(){ $("#conteudo4").slideToggle("fast"); // Propriedade Fast }); //efeito fadeToggle com funcao para quando se passar ou mouse em cima (mouseover) ele executar o bloco de codigo. $("#conteudo5").hide(); $("#botao5").mouseover(function(){ // Funcao mouseover $("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar) }); //efeito slideToggle com funcao para quando se passar ou mouse em cima (mouseover) ele executar o bloco de codigo. $("#conteudo6").hide(); $("#botao6").mouseover(function(){ // Funcao mouseover $("#conteudo6").slideToggle("slow"); // Propriedade Slow (devagar) }); }); </script>Obs: Apesar de parecer muita coisa... nao e complicado esse codigo grande e para varios efeitos diferentes...Agora irei postar o codigo do HTML com os scripts...123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Efeito slideToggle no jQuery</title> <script type="text/javascript" src="../jquery.js"></script> <!-- Inserindo a biblioteca jQuery no seu site --> <script type="text/javascript"> $(document).ready(function(){ // Inicia o bloco de codigo $("#conteudo").hide(); // Esconde o conteudo do #conteudo $("#botao").click(function(){ $("#conteudo").fadeToggle("slow"); // Propriedade Slow (devagar) }); //Efeito slideToggle ja visto aqui no blog $("#conteudo2").hide(); $("#botao2").click(function(){ $("#conteudo2").slideToggle("slow"); // Propriedade Slow (devagar) }); //efeito fadeToggle com a propriedade ("fast")[Rapido] $("#conteudo3").hide(); $("#botao3").click(function(){ $("#conteudo3").fadeToggle("fast"); // Propriedade Fast }); //efeito slideToggle com a propriedade ("fast")[Rapido] $("#conteudo4").hide(); $("#botao4").click(function(){ $("#conteudo4").slideToggle("fast"); // Propriedade Fast }); //efeito fadeToggle com funcao para quando se passar ou mouse em cima (mouseover) ele executar o bloco de codigo. $("#conteudo5").hide(); $("#botao5").mouseover(function(){ // Funcao mouseover $("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar) }); //efeito slideToggle com funcao para quando se passar ou mouse em cima (mouseover) ele executar o bloco de codigo. $("#conteudo6").hide(); $("#botao6").mouseover(function(){ // Funcao mouseover $("#conteudo6").slideToggle("slow"); // Propriedade Slow (devagar) }); }); </script> </head> <body> <!-- Efeito fadeToggle --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Clique aqui para ver o fadeToggle. </div> <div id="conteudo" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> <!-- Efeito slideToggle // Ja foi mostrado no blog --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao2" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Clique aqui para