JavaScript Tutorial/jQuery/hide

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

Animates all shown paragraphs to hide slowly, completing the animation within 600 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 () {
             $("p").hide("slow");
           });   
       });
   </script>
 </head>
 <body>
   <body>
         <button>Hide</button>

asdf

   </body>

</html></source>


Click to hide

   <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 () {
                 $(this).hide();
                 return true;
               });


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

Hello

   </body>

</html></source>


Hide and remove

   <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").hide(2000, function () {
                       $(this).remove();
               });


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

Hello

   </body>

</html></source>


Hide a tag

   <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").hide();


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

Hello

   </body>

</html></source>


Hide fast

   <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 () {
                 $(this).hide("fast");
                 return true;
               });


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

Hello

   </body>

</html></source>


Hide in millisecond

   <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 () {
                 $(this).hide(2000);
                 return true;
               });


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

Hello

   </body>

</html></source>


Puff an image

   <source lang="javascript">

<html lang="en"> <head>

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/effects.core.js"></script>
 <script type="text/javascript" src="js/ui/effects.scale.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
       $("#loading").click(function() {
         $(this).hide("puff");
       });
 });
 </script>

</head> <body> <img id="loading" alt="Loading" src="http://www.wbex.ru/style/logo.png"> </body> </html></source>