jQuery Effects Methods

Cool jQuery Effets

If you want to make your website more attractive then you must read about these jQuery effects. jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on. In previous articles you have learned about jQuery Selectors, Attributes, Traversing methods, CSS selectors and jQuery events, now we will try to understand some cool jQuery Efects. Let's invest some effort and get some confidence with some practice.

Toggle () method

This method toggles the elements. It toggles the display state of elements between revealed and hidden.

Syntax: [selector]..toggle([speed][, callback]);

Speed

Speed is a string representation of one of the three predefined speeds ("slow", "normal", or "fast") or we can fix the speed in milliseconds to run the animation (for example 2000).

Callback

Callback is an optional parameter of a function to be executed whenever the animation completes.

The following is the syntax:



And the output will be:



Here we will click on “Click Here”, we will get a togged result:



This is because of Toggle() so when we click again on this we will get the as in the following:result:



Show() | hide() method

The Show() method shows each of the matched elements if hidden. And the hide() method hides each set of matched elements if shown.

Syntax: [selector].show/hide( speed, [callback] );

Speed

Speed is a string representing one of the three predefined speeds ("slow", "normal", or "fast") or we can fix the speed in milliseconds to run the animation (for example 2000).

Callback

Callback is an optional parameter of a function to be executed whenever the animation completes.

The following is the syntax:



The normal output for this code will be:



Click on the Hide button, the output will be:



And then click on the Show button:



So this was the use of the toggle(), Show() and hide() methods. Similarly we can use other methods as in the following:

• animate( params, [duration, easing, callback] ) This function makes custom animations for your HTML elements.
  
  
• fadeIn( speed, [callback] ) This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.
  
  
• fadeOut( speed, [callback] ) This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to "none" and firing an optional callback after completion.
  
  
• fadeTo( speed, opacity, callback ) This function fade the opacity of all the matched elements to a specified opacity and firing an optional callback after completion.
  
  
• stop( [clearQueue, gotoEnd ]) This function stops all the currently running animations.

These are some cool jQuery effect methods. Use the concept given above and do some work with these methods.

Some special UI-based effects are given below. Before using these effects, include a jQuery UI Library. If you don't want to use this file in your code then use the URL.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

Then start using the given effetcs.



Do practice with these jQuery effects, you will be perfect for dynamic WebPages, ping me if you experience any problem. Keep coding.