JavaScript Tutorial/jQuery/fadeOut

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

Fade out 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).fadeOut(2000);
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


Fade out show

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
                 $("div").text("selected").show().fadeOut(1000); 
       });
   </script>
 </head>
 <body>
   <body>
   </body>

</html></source>


fadeOut(speed, callback): Only the opacity is adjusted for this 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(){
       
           $("p").click(function () {
             $("p").fadeOut("slow");
           });
       });
   </script>
 </head>
 <body>
   <body>

fade away.

   </body>

</html></source>


Fade out this

   <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).fadeOut();
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


Fast fade out

   <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).fadeOut("fast");
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>


Slow fade out

   <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).fadeOut("slow");
              });
       });
   </script>
 </head>
 <body>
   <body>
Click me<button>button</button>
   </body>

</html></source>