JavaScript Tutorial/jQuery/fadeTo

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

Fade to a certain opacity

   <source lang="javascript">

<html>

 <head>
   <style>
     .test{ border: 1px solid red; }
   </style>
 
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
        
        $("p:parent").fadeTo(1500, 0.3);
   });
   </script>
 </head>
 <body>

paragraph in div

div
 </body>

</html></source>


Fade to 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").fadeTo(250, Math.random(),function () {
             alert("done");
           });
        
       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


Fade to 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(){
           $("div").fadeTo(250, Math.random());
       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


Fade to random

   <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").fadeTo("fast", Math.random());


       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


fadeTo(speed, opacity, 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:first").click(function () {
             $(this).fadeTo("slow", 0.33);
           });
       });
   </script>
 </head>
 <body>
   <body>

asdf

   </body>

</html></source>


Fast fade to

   <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").fadeTo("fast", Math.random());


       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>


Slow fade to

   <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").fadeTo("slow", 0.33);


       });
   </script>
 </head>
 <body>
   <body>
Click me
   </body>

</html></source>