To change background color, use the mouseenter event. The background color change when you place mouse cursor:mouseenter: function(){    $(this).css("background-color", "gray"); }The mouse cursor is placed on the following element:Click and move the mouse pointer to change the background color.You can try to run the following code to learn how to animate a change in background color on mouseover:Example Live Demo               $(document).ready(function(){          $("body").on({             mouseenter: function(){                $(this).css("background-color", "gray");             },                 mouseleave: function(){                $(this).css("background-color", "red");             },              });       });        Click and move the mouse pointer to change the background color.

Use the hide() and show() method with animate() to hide and show elements.ExampleYou can try to run the following code to learn how to work with animate() method to hide and show elements:Live Demo $(document).ready(function(){     $("#btn1").click(function(){         $("#box").animate({height: "300px"}, 500, function() {            $(this).hide();         });     });    $("#btn2").click(function(){         $("#box").animate({height: "300px"}, 500, function() {            $(this).show();         });     }); }); Hide Show

jQuery show() methodThe show( speed, [callback] ) method shows all matched elements using a graceful animation and firing an optional callback after completion.Here is the description of all the parameters used by this method −speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).callback − This is optional parameter representing a function to call once the animation is complete.ExampleYou can try to run the following code to learn how to work with show() method:Live Demo           The jQuery Example     ... Read More

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.3.The following are the features of AngularJS:AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the ... Read More

Firstly, let’s go through what is Ajax and why it is used.AJAXAJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.It has the following points, which shows its importance.AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.With AJAX, when ... Read More

jQuery.size() methodThis method returns the number of elements in the object. The size() method deprecated in jQuery 1.8 and completely removed in jQuery 3.0. As an alternative, the length property is used.ExampleYou can try to run the following code to learn how to work with size() method.Note: To run the jQuery size() method, use jQuery version less than 1.8, since it deprecated in jQuery 1.8. Generally, the length property is preferred now.Live Demo $(document).ready(function(){     $(".btn").click(function(){         alert($("li").size());     }); }); How many li elements? ... Read More

To workaround with display: none in an element in jQuery, use the hide() method. It will do the same work.ExampleYou can try to run the following code to learn how to add display:none in an HTML element −Live Demo $(document).ready(function(){   $("button").click(function(){     $("p").removeAttr("style").hide();   }); }); Heading 1 This is demo text. This will hide on button click. This is another text. This will hide on button click Hide

To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.The toggle( speed, [callback]) method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.Here is the description of all the parameters used by this method −speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).callback − ... Read More

jQuery animated effected can be achieved with methods such as animate, slideDown(), slideToggle(), etc. This created an animation effect in an HTML web page using jQuery. The following table lists down some of the important methods to create different kind of effects:S. NoMethods & Description1.animate( params, [duration, easing, callback] )A function for making custom animations.2.fadeIn( speed, [callback] )Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.3.fadeOut( speed, [callback] )Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.4.fadeTo( speed, opacity, ... Read More

To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.ExampleLive Demo $(document).ready(function(){     $('#show').click(function() {       $('.menu').toggle("slide");     }); }); Click to Show/ Hide div             India       US       UK       Australia