Efeito slideToggle e fadeToggle no jQuery e algumas propriedades

Marcadores:
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: Aqui
Começaremos pelo efeito fadeToggle…
Script:
1
2
3
4
5
6
7
<script type="text/javascript">
      $(document).ready(function(){
        $("#conteudo").hide();
        $("#botao").click(function(){
          $("#conteudo").fadeToggle("slow");
        });
 </script>
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”)  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…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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(){
        $("#conteudo").hide();
        $("#botao").click(function(){
          $("#conteudo").fadeToggle("slow");
        });
    </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>
  </body>
</html>
Este é o efeito fadeToggle….
Irei mostrar agora as propriedades do slideToggle e fadeToggle…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
      $(document).ready(function(){ // Inicia o bloco de código
        $("#conteudo").hide(); // Esconde o contéudo 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")[Rápido]
        $("#conteudo3").hide();
        $("#botao3").click(function(){
          $("#conteudo3").fadeToggle("fast"); // Propriedade Fast
        });
        //efeito slideToggle com a propriedade ("fast")[Rápido]
        $("#conteudo4").hide();
        $("#botao4").click(function(){
          $("#conteudo4").slideToggle("fast"); // Propriedade Fast
        });
 
        //efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.
        $("#conteudo5").hide();
        $("#botao5").mouseover(function(){ // Função mouseover
          $("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar)
        });
         //efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.
        $("#conteudo6").hide();
        $("#botao6").mouseover(function(){ // Função mouseover
          $("#conteudo6").slideToggle("slow"); // Propriedade Slow (devagar)
        });
      });
    </script>
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…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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 código
        $("#conteudo").hide(); // Esconde o contéudo 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")[Rápido]
        $("#conteudo3").hide();
        $("#botao3").click(function(){
          $("#conteudo3").fadeToggle("fast"); // Propriedade Fast
        });
        //efeito slideToggle com a propriedade ("fast")[Rápido]
        $("#conteudo4").hide();
        $("#botao4").click(function(){
          $("#conteudo4").slideToggle("fast"); // Propriedade Fast
        });
 
        //efeito fadeToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.
        $("#conteudo5").hide();
        $("#botao5").mouseover(function(){ // Função mouseover
          $("#conteudo5").fadeToggle("slow"); // Propriedade Slow (devagar)
        });
         //efeito slideToggle com função para quando se passar ou mouse em cima (mouseover) ele executar o bloco de código.
        $("#conteudo6").hide();
        $("#botao6").mouseover(function(){ // Função 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 ver o slideToggle.
      </div>
      <div id="conteudo2" 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 fadeToggle Rápido -->
    <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">
      <div id="botao3" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">
        Efeito fadeToggle rápido.
      </div>
      <div id="conteudo3" 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 Rápido // Ja foi mostrado no blog -->
    <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">
      <div id="botao4" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">
        Efeito slideToggle rápido.
      </div>
      <div id="conteudo4" 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 fadeToggle Rollover -->
    <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">
      <div id="botao5" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">
        Efeito fadeToggle Rollover(mouseover).
      </div>
      <div id="conteudo5" 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 Rollover // Ja foi mostrado no blog -->
    <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;">
      <div id="botao6" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;">
        Efeito slideToggle Rollover(mouseover).
      </div>
      <div id="conteudo6" 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>
Espero que gostem e façam um belo uso.
Demo: Aqui