Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to add easing effect to your animation with jQuery?
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 $(document).ready(function(){ $('body').on('click', '#answer', function() { var container = $('.new-answer'); ...
Read MoreHow to append an element after an element using jQuery?
To append an element after an element using jQuery, use the insertAfter() method.ExampleYou can try to run the following code to learn how to append an element after an element using jQuery:Live Demo The jQuery Example $(document).ready(function() { $("div").click(function () { $("#source").insertAfter(this); }); }); .div { margin:10px; padding:12px; border:2px solid #666; width:60px; } Click on any square below to see the result:
Read MoreHow can I show and hide div on mouse click using jQuery?
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
Read MoreHow can I make jQuery animations smoother?
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 MoreWhat is the difference between jQuery.animate() and jQuery.hide()?
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 MoreWhat are jQuery events .load(), .ready(), .unload()?
jQuery load() methodThe load() method is used to attach event handler to load event.ExampleYou can try to run the following code to learn how to work with jQuery load() method.Note: The method deprecated in jQuery 1.8. It got finally removed in jQuery 3.0. To run the following code, add jQuery version lesser than 1.8, Live Demo $(document).ready(function(){ $("img").load(function(){ alert("This is an image."); }); }); This image will load only in jQuery version lesser than 1.8 jQuery ready() methodEasily specify what ...
Read MoreHow to remove all style attributes using jQuery?
To remove an attribute from each tag using jQuery, use the removeAttr() method and use the Universal Selector. Let us see how to use the method to remove all style attribute. Use the universal selector also to select all the elements.You can try to run the following code to learn how to remove all style attributes using jQuery −Example $(document).ready(function(){ $("button").click(function(){ $("h1").removeAttr("style"); }); }); This is heading This is demo text. This is heading This is demo text. Remove Click above to remove style attribute from all h1 elements.
Read MoreHow to add and remove HTML attributes with jQuery?
To add and remove HTML attributes with jQuery, use the addClass() and removeClass() method.You can try to run the following code to add and remove HTML attributes with jQuery −Example jQuery Example $(document).ready(function(){ $( '#add' ).click( function () { $('#page_navigation1').addClass( 'blue-class' ); }); $( '#remove' ).click( function () { $('#page_navigation1').removeClass( 'blue-class' ); }); }); .blue-class { background-color: blue; font-size: 30px; } Demo Add Remove
Read MoreHow should I initialize jQuery in a web page?
To initialize jQuery in a web easy is quite easy. You can try to run the following code to learn how to initialize jQuery in a web page. We’re using Google CDN to add jQuery. Microsoft CDN is also available for the same purpose of adding jQuery library to HTML.Example jQuery Function $(document).ready(function() { $("div").click(function() {alert("Welcome to Tutorialspoint!");}); }); Click on this to see a dialogue box.
Read MoreIs it possible to use $(this) and universal selector (*) with jQuery?
Yes, it is possible to use $(this) and universal selector (*) with jQuery. Let’s see how to do it. You can try to run the following code to learn how to use this and universal selector with jQuery:Example jQuery Universal Selector $(document).ready(function() { $('*', this).css("background-color", "yellow"); }); This is first division of the DOM. This is second division of the DOM.
Read More