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 […]
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> […]
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%; […]