How to Create Fading Method using jQuery

How to Create Fading Method using jQuery

In this article, we will explain How to Create Fading Method using jQuery. Some fade Methods are;- fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() Example:- <html> <head> <title>fadeIn() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <button>Click for fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html> […]
Read more
How to Create Animation using jQuery

How to Create Animation using jQuery

In this article, you will learn How to Create Animation using jQuery like hiding and show. Example:- <html> <head> <title>Animation in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({left: '250px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); }); </script> </head> <body> <button>Click to Animation</button> <div style="background:red;color:#fff;height:200px;width:500px;position:absolute;">Welcome to Hub of Tutorials</div> </body> </html> Check on […]
Read more