JavaScript Tutorial/jQuery/fadeIn

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

Fade in 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(){
                 $("div").fadeIn(1000, function () {
                   alert("done");
                 });
       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


Fade in controlled by 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(){
                 $("div").fadeIn(2000);
       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


Fast fade in

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

</html></source>


Header fade in

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   
       $(document).ready(function(){
             $("h1").css("opacity", 1).fadeIn(30).fadeOut(1000);
       });
   </script>
 </head>
 <body>
   <body>

header 1

   </body>

</html></source>


Slow fade in

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

</html></source>