jQuery Effects

Date: 07/03/2020

Jquery has some of the in-built methods, that methods are used to add the effects for the Html element.

jQuery | hide()

hide() is an inbuilt method in jquery, which is used to hide the selected element.

syntax:

$(selector).hide(duration, easing, call_function);

Example:

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(500);
  });
});
</script>
</head>

<body>
<center>
<button>ok</button>

<p>jquery effects and method test</p>

</center>
</body>
</html>

Before clicking the button:

After clicking the button:

jQuery | toggle()

toggle() method is used to toggle between hide() and show

Generic Highlighting
$(selector).toggle(speed, easing, callback)


<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(500);
  });
});
</script>
</head>

<body>
<center>
<button>toggle</button>

<p>jquery effects and method test</p>

</center>
</body>
</html>

Before clicking the button:

After clicking the button:

After clicking the button next time:

jQuery | fade

fadeIn() – used to fade in a invisible element.

fadeOut() – used to fade out a visible element

fadeTo() – used to change the opacity of the selected element.

fadeToogle() – used to toogle between fadeIn() and fadeOut().

fadeToggle():

syntax:

$(selector).fadeToggle(speed,callback);

Example:

<!DOCTYPE html>   
<html>
   <head>
      <title>  
      </title>
      <style> 
         #mydiv { 
         	color: white;
         margin-top: 50px; 
         padding-top: 50px; 
         height: 140px; 
         background: blue; 
         } 
      </style>
      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js 
   </head>
   <body>
      <center>
      	<button id = "fade">Fade</button>  
         <div id= "mydiv">
         	<p>pheonixsolutions</p>
         </div>      
      <script>  
         $(document).ready(function() { 
             $("#fade").click(function() { 
                 $("#mydiv").fadeToggle(); 
             }); 
         }); 
      </script> 
      </center> 
   </body>
</html>

Before clicking the button:

After clicking the button:

Again clicking the button:

Conclusion:

Thanks for using pheonixsolutions.
If you like the blog share it with your friends. 

Post Views: 198

Leave a Reply