jQuery Effects

Introduction to jQuery Effects

jQuery is one of the most popular javascript libraries which is designed to simplify the HTML DOM i.e. the document object model properties such as manipulation and tree traversal. Other properties such as event handling, Ajax and CSS animation is also simplified. It is an open-source and a free library which is typically used in 73% of the 10 million websites that are being used today. The core features of jQuery include DOM element based selectors, manipulation and traversal which makes working on jQuery much easier and convenient. In this topic, we are going to learn about jQuery Effects.

It is used to provide a very simple looking interface to do various kinds of amazing effects. These methods allow to quickly use and apply the most commonly used features- effects along with bare to minimum configurations.  The command for showing and hiding elements is pretty much the same what anybody willing to see them would expect. Show() command is used to show the elements in a wholly wrapped set and 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 is used to perform a custom based animation for a set of CSS properties. This method is used to change the state of the element from one state to another along with CSS styles. The property value is changed gradually such that an animated effect can be achieved. The thing to be noted is that only numeric values could be animated such as the margin: 40px. On the other hand, the values for strings cannot be animated 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 is used to set the delay for all the functions that are queued upon the selected elements.

Syntax  

$(selector).delay(duration, NameOfQueue)

Example

$("label").click(func(){
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
});

3) fadeToggle()

This function is used to toggle between the fade in and fade out functions on different boxes. If any element fades out then this function fadeToggle() can be used to fade them in. The elements which are in the hidden form will not be displayed as a part of this method.

Syntax

$(selector).fadeToggle(duration, easing, callback)

Example  

$("label").click(func(){
$("#box").fadeToggle();
});

4) fadeTo()

This method is used to change the opacity of all the <p> i.e. paragraph related elements gradually. 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 is used to clear 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 animations which are currently running and is used to remove all the queued animations. It is also used to complete all the animations for a varied range of selected elements. This method is similar to methods such as .stop which has both true parameters. The major difference between this method and 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 which are in the pipeline waiting to be run. This dequeue method is used alongside with 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 which is used to slide down or show the selected lists of elements. The point to be noted here is that it also works on the elements which are in hidden format and the display type is shown as none in the case of CSS but the visibility will not have to be hidden.

Syntax

$(selector). slideDown (duration, easing, callback)

Example

$("label").queue(func(){
$("p").slideDown();
});

9) slideUp()

The slideUp() method is used to hide all the <p> selected elements. The elements which are in the hidden form will not be displayed 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()

As contrary to the slideUp() method this method is used to show all the hidden <p> elements. This slidedown() method works on all the elements which are also related to the hidden methods in the case of jQuery methods and the name is also displayed in the CSS but the visibility is not hidden.

Syntax

$(selector).slideDown(duration, easing, callback)

Example

$("label").queue(func(){
$("p").slideDown();
});

11) Toggle()

This method is used to toggle between show and hide of various <p> based elements. This method is used to check for the visibility of the elements. The show() method is used to run even when the element is hidden. Hide() is run even when the element is visible. Both show and hide methods in combination creates a toggle effect and therefore the method toggle().

Syntax

$(selector).toggle(duration, easing, callback)

Example

$("label").queue(func(){
$("p").toggle();
});

12) slideToggle()

This method is used to toggle between the slideUp() and the slideDown() functions for all the elements based on the paragraph. This method is used to check the elements which are selected for visibility. SlideDown() is the function which can be seen running 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 the effects on the web page by providing numerous amounts of functions that can be put on different selectors. It is upon you, how you wish to make your websites look more effect-filled. Hope you have liked our article. Stay tuned to our blog for more articles like these.

Recommended Articles

This is a guide to jQuery Effects. Here we have discussed the Different types of jQuery Effects Methods with syntax and example. You may also look at the following article to learn more –

1. jQuery Alternatives
2. jQuery querySelector
3. jQuery delay()
4. jQuery val()