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 Full Article
How to Create Get Content and Attributes in jQuery

How to Create Get Content and Attributes in jQuery

In this article, you will learn How to Create Get Content and Attributes in jQuery. Get Content text() html() val() Example:- <html> <head> <title>Get Content</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">In this paragraph having some<b>bolded</b> text.</p> <button id="btn1">Show Text</button> […]
Read Full Article
How to Create Tooltip using CSS

How to Create Tooltip using CSS

In this article, you will learn How to Create Tooltip using CSS. Example:- <html> <head> <title>Tooltip using CSS</title> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; […]
Read Full Article