Updated July 1, 2023
Introduction to jQuery Effects
jQuery, one of the most popular JavaScript libraries, aims to simplify the manipulation and tree traversal of the HTML DOM (document object model) properties. Other properties, such as event handling, Ajax, and CSS animation, are simplified. Approximately 73% of the 10 million websites currently in use today commonly utilize it as an open-source and free library. The core features include DOM element-based selectors, manipulation, and traversal, which makes working on jQuery much easier and more convenient. In this topic, we are going to learn about jQuery Effects.
It provides a very simple-looking interface to do various kinds of amazing effects. These methods allow quick use and apply the most commonly used features- effects and bare to minimum configurations. The command for showing and hiding elements is pretty much the same as what anybody willing to see them would expect. The show () command is used to show the elements in a wholly wrapped set, and the hide() command is used to hide them.
Different jQuery Effect Methods
Here we discuss some Different types of jQuery Effect Methods
1. Animate()
The animate method performs a custom-based animation for a set of CSS properties. Developers use this method, along with CSS styles, to change the element’s state from one state to another. They change the property value gradually to achieve an animated effect. The thing to be noted is that only numeric values could be animated, such as the margin: 40px. On the other hand, you cannot animate string values, such as background-color: green. This again comes with an exception for strings like the show, hide and toggle.
Syntax
(selector).animate({styles}, duration, easing, callback)Example
$("label").click(func(){
$("#box").animate({height: "100px"});
});2. Delay()
As the name suggests, this one sets the delay for all the functions queued upon the selected elements.
Syntax
$(selector).delay(duration, NameOfQueue)Example
$("label").click(func(){
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
});3. fadeToggle()
Users utilize this function to toggle between the fade-in and fade-out functions on different boxes. If any element fades out, this function fadeToggle() can be used to fade them in. The method does not display the elements in the hidden form.
Syntax
$(selector).fadeToggle(duration, easing, callback)Example
$("label").click(func(){
$("#box").fadeToggle();
});4. fadeTo()
You can use this method to gradually change the opacity of all the <p> elements, i.e., elements related to paragraphs. The specified opacity in this context refers to the changing effect opacity.
Syntax
$(selector).fadeTo(duration, opacity, easing, callback)Example
$("label").click(func(){
$("p").fadeTo(100, 0.9);
});5. clearQueue()
This method is the same as suggested by the name. This clears the queue and removes all the items from the queue which have not been run. The function will complete its run once it has started to run. This is related to two methods, viz. queue() and dequeue().
Syntax
$(selector).clearQueue(NameOfQueue)Example
$("label").click(func(){
$("box").clearQueue();
});6. finish()
This method in jQuery is used to end or finish the currently running animator as it is used to stop all the currently running animations and remove all the queued animations. It completes all the animations for various selected elements. This method is similar to .stop, which has both true parameters. The major difference between this method and the finish is that the finish method is used to stop and pause the CSS element property types of all the queued animations.
Syntax
$(selector).finish(NameOfQueue)Example
$("#complete").click(func(){
$("div1").finish();
});7. dequeue()
This method is used to remove the next function from the queue and is then used to execute the function. A queue is one or more functions in the pipeline waiting to be run. This dequeue method is used alongside the queue method. One element can have several queues. The fx queue is the most common one, which is also the default queue.
Syntax
$(selector).dequeue(NameOfQueue)Example
$("label").queue(func(){
$("</a>").css("background-color", "black");
$("div").dequeue();
});8. slideDown()
This is another useful method in jQuery used to slide down or show the selected list of elements. Note that it also operates on elements in a hidden format, where the CSS display type is set to “none,” but the visibility does not have to be hidden.
Syntax
$(selector). slideDown (duration, easing, callback)Example
$("label").queue(func(){
$("p").slideDown();
});9. slideUp()
The slideUp() method hides all the <p> selected elements. The hidden form does not display the elements at all. This, therefore, does not affect the layout of the page.
Syntax
$(selector).slideUp(duration, easing, callback)Example
$("label").queue(func(){
$("p").slideUp();
});10. slideDown()
Contrary to the slideUp() method, this method shows all the hidden <p> elements. This slidedown() method works on all the elements related to the hidden methods in the case of jQuery methods. The CSS also displays the name, but it does not hide it in terms of visibility.
Syntax
$(selector).slideDown(duration, easing, callback)Example
$("label").queue(func(){
$("p").slideDown();
});11. Toggle()
This method to toggles between show and hides various <p> based elements. You use this method to check for the visibility of the elements. The show() method executes regardless of the visibility of the element, while the hide() method executes regardless of the visibility of the element. In combination, both the show and hide methods create a toggle effect and, therefore, the method toggle().
Syntax
$(selector).toggle(duration, easing, callback)Example
$("label").queue(func(){
$("p").toggle();
});12. slideToggle()
This method to toggles between the slideUp() and the slideDown() functions for all the elements based on the paragraph. This method checks the elements selected for visibility. The SlideDown() function executes when the element is hidden. In contrast, the slideUp() element is the one that should be run if the element is visible.
Syntax
$(selector).slideToggle(duration, easing, callback)Example
$("label").queue(func(){
$("p").slideToggle();
});jQuery enables us to add effects to the web page by providing numerous functions that can be put on different selectors. How you wish to make your websites look more effect-filled is upon you. Hope you have liked our article. Stay tuned to our blog for more articles like these.
Recommended Articles
We hope that this EDUCBA information on “jQuery Effects” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
