JavaScript Tutorial/jQuery/slideToggle

Материал из Web эксперт
Перейти к: навигация, поиск

30. Fast slide toggle

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).slideToggle("fast");
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


30. Slide animation

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   function animateIt() {
     $("#mover").slideToggle("slow", animateIt);
   }
   animateIt();
 });
   </script>
<style>
 div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
 </style>
 </head>
 <body>


 </body>

</html></source>


30. Slide toggle and function

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   function animateIt() {
     $("#mover").slideToggle("slow", animateIt);
   }
   animateIt();
 });
   </script>
<style>
 div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
 </style>
 </head>
 <body>


 </body>

</html></source>


30. Slide toggle button

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).slideToggle();
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


30. Slide toggle callback

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).slideToggle("slow",function () {
                    alert("done");
       
                 });
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


30. Slide toggle in milliseconds

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).slideToggle(2000);
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


30. Slide toggle slow

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).slideToggle("slow");
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


30. slideToggle(speed, callback): height is adjusted

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("button").click(function () {
             $("p").slideToggle("slow");
           });
       });
   </script>
 </head>
 <body>
   <body>
         <button>Toggle</button>

This is the paragraph.

   </body>

</html></source>