- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 766 Articles for JQuery
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
500 Views
To add easing effect to your animation, use the animation speed properly to form it a perfect animation for the web page. Do not speed up animation and you should know where to stop it while using animate().Here for our example, we have a button that takes you to a textarea to add an answer: Add answer Now set the fade out property properly to set easing effect.Example Live Demo $(document).ready(function(){ $('body').on('click', '#answer', function() { var container = $('.new-answer'); ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
111 Views
The fadeTo( ) method fades the opacity of all matched elements to a specified opacity 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", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).opacity − A number between 0 and 1 denoting the target opacity.callback − This is optional parameter representing a function to call once the animation is complete.You can try to run the following code to learn how to work with fadeTo() method ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
214 Views
jQuery animate()The animate( ) method performs a custom animation of a set of CSS properties.Here is the description of all the parameters used by this method −params − A map of CSS properties that the animation will move toward.duration − This is optional parameter representing how long the animation will run.easing − This is optional parameter representing which easing function to use for the transition.callback − This is optional parameter representing a function to call once the animation is complete.You can try to run the following code to learn how to work with jQuery animate() method:Example Live Demo ... Read More
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
512 Views
To make jQuery animations smoother use the easing library. Use the animation speed properly to form it a perfect animation for the web page. Do not speed up animation and you should know where to stop it while using animate().For an example, set a button, that fades out on click and displays a textarea:Add answerThe following is the textarea that generates showing smoother animation using animation() and fadeout(): You can try to run the following code to make jQuery animation smoother:Example Live Demo $(document).ready(function(){ $('body').on('click', '#answer', function() ... Read More
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
616 Views
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.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
3K+ Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
138 Views
The toggle() method toggles displaying each of the set of matched elements.ExampleYou can try to run the following code to learn how to work with jQuery.toggle() method:Live Demo jQuery toggle() method $(document).ready(function() { $("#toggle").click(function(){ $(".target").toggle( ); }); }); p { background-color:#bca; width:200px; border:1px solid green; } Click on the following button: Toggle
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
271 Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
214 Views
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
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
1K+ Views
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