jQuery Callback Functions JavaScript statements are executed line by line. But, since jQuery effect takes some time to finish the next line code may execute while the previous effect is still running. To prevent this from happening jQuery provides a callback function for each effect method. A callback function is a function that is executed…

jQuery Method Chaining The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code. This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method. Here’s…

While creating the animated hover effect one of the common problem you may face is multiple queued animations, when you place and remove the mouse cursor rapidly. Because, in this situation mouseenter or mouseleave events are triggered quickly before the animation complete. To avoid this problem and create a nice and smooth hover effect you can add the stop(true, true) to…

jQuery stop() Method The jQuery stop() method is used to stop the jQuery animations or effects currently running on the selected elements before it completes. The basic syntax of the jQuery stop() method can be given with: $(selector).stop(stopAll, goToEnd); The parameters in the above syntax have the following meanings: Here’s a simple example that demonstrates the jQuery stop() method in real action in…

You can also animate the multiple properties of an element one by one individually in a queue using the jQuery’s chaining feature. We’ll learn more about chaining in next chapter. The following example demonstrates a jQuery queued or chained animation, where each animation will start once the previous animation on the element has completed. Example…

jQuery animate() Method The jQuery animate() method is used to create custom animations. The animate() method is typically used to animate numeric CSS properties, for example, width, height, margin, padding, opacity, top, left, etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors…

The jQuery slideToggle() method show or hide the selected elements by animating their height in such a way that if the element is initially displayed, it will be slide up; if hidden, it will be slide down i.e. toggles between the slideUp() and slideDown() methods. Example Similarly, you can specify the duration parameter for the slideToggle() method like slideUp() and slideDown() methods to control the speed of…

jQuery slideUp() and slideDown() Methods The jQuery slideUp() and slideDown() methods is used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e. by sliding them up or down). Example Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the slideUp() and slideDown() methods to control how long the slide animation will run. Durations can be…

The jQuery fadeToggle() method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in (i.e. toggles the fading effect). Example Similarly, you can specify the duration parameter for the fadeToggle() method like fadeIn()/fadeOut() method to control the duration…

In this tutorial you will learn how to fade in and out elements using jQuery. jQuery fadeIn() and fadeOut() Methods You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity. Example Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how…