JQuery Effects

Introduction to jQuery Effects

jQuery is one of the most popular javascript libraries which is also design 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 also an open-source and a free library which is also typically use in 73% of the 10 million websites that are being used today.

The core features of jQuery also include DOM element based selectors, manipulation and traversal which makes working on jQuery much easier and convenient. In this topic, we are also going to learn about jQuery Effects.

It is also use to provide a very simple looking interface to do various kinds of amazing effects.

These methods also 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 also pretty much the same what anybody willing to see them would expect. Show() command is use to show the elements in a wholly wrap set and hide() command is also used to hide them.

Different jQuery Effect Methods

Here we discuss some Different types of jQuery Effect Methods

1) Animate()

The animate method is also use 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 also change gradually such that an animated effect can be achieved. The thing to be note 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 also 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 also use to set the delay for all the functions that are queue 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 also use to toggle between the fade in and fade out functions on different boxes. If any element fades out then this function fadeToggle() can be use to fade them in. The elements which are in the hidden form also will not display as a part of this method.

 Syntax

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

Example  

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

4) fadeTo()

This method is also use to change the opacity of all the <p> i.e. paragraph related elements gradually. The specified opacity in this context also 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 also use 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 also 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 use to end or finish the currently running animator as it is also use to stop all the animations which are currently running and is use to remove all the queued animations.

It is also use 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 also use 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 use to remove the next function from the queue and is then use to execute the function. A queue is also one or more functions which are in the pipeline waiting to be run.

This dequeue method is also use 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 use 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 also 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 also 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 also 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.