jQuery and Effects
To use these effects, simply apply them to the element being selected, like you use any other jQuery function. For example, to hide an element with class sub_menu you can use:
Every effect function takes two parameters: (1) an optional speed setting and (2) a callback function. The speed will determine the amount of time the effect takes to complete, while a callback function is a function that is called when the effect is completed.
To assign a value to the speed parameter, you can use ‘fast’, ‘normal’, or ‘slow. You can also use a number which represents the number of milliseconds the effect will take to complete. To represent 10 seconds, use 10000 as 1 sec = 1000 milliseconds.
If you want the effect to be ‘slow’, you can write as:
Or if you want the effect to complete in 5 seconds, the code will be:
You don’t have to use quotes around the value when the written value of speed is in milliseconds (numbers).
The numerical values of speed in terms of fast, normal, and slow are equal to 200 milliseconds, 400 milliseconds, and 600 milliseconds.
So writing $(‘element’).effectName(‘slow’); is same as writing $(‘element’).effectName(600);
Types of jQuery effects
You can categorize jQuery effects in the following ways.
1. Effects which can show/hide elements
2. Effects which can fade in or out elements
3. Effects which can slide in or out elements.
Show or Hide elements
jQuery provides 3 functions to show or hide elements.
Show()function makes a hidden element visible. It works only if the element is already hidden.
Hide()function hides a visible element but doesn’t remove it from the Document Object Model.
Toggle()function will hide a visible element and show a hidden element. This is mostly used if you are not aware of the state of the element at a particular time.
This would create a more dramatic effect. You can also control the speed of the effect as mentioned earlier.
fadeIn()function makes a hidden element visible while applying the fading-in effect on the element.
fadeout()function hides a visible element by fading it out of the view.
fadeToggle()function reverse the current display state of the element while fading in or out as required.
fadeTo()function is slightly different than the above three functions. It fades an element to the defined opacity. For example, if you have to make an element semi-transparent when displayed in the view, you can write:
This function will change the element’s opacity to 50%.
These jQuery functions will create an effect like elements are sliding in or out of the view of the display.
slideDown()function makes a hidden element slide into the view. First, the top of the element appears and then the rest of the element appears.
SlideUP()function hides the element from view by hiding the bottom of it and moving anything below the element up until the element disappears.
slideToggle()function applies the
slideDown()if the element is hidden, and the
slideUp()if the element is visible.
Other than these, there are
.delay() functions which you are going to learn in the upcoming lessons. In the next lesson, we will see these functions in more depth and how we can use these to create the effects and animations to make our website more interactive with a few lines of codes.
In case, you have any question about jQuery effects, please let me know in the comments section below.
|CSS and jQuery||Tutorial Home||Hiding elements using jQuery|