.hide( [duration,] [easing,] [callback] )
Without any arguments passed to the method, causes the selected object to hide immediately. We will explain other effects through an example :-
Hide simplyHide in 3 secondsI am in hurryI will shoutHide allHide one by one from top
Show all Toggle all
About the code, we first 7 divs each with class style whose design has been mentioned in style tag. We then selected each of the class separately using :eq() as discussed in selectors earlier. We assigned different colors to the different divs. We then used different methods to hide the elements present on the document. Specifying a value to hide() causes it to take so much time(in ms) to disappear as in the 2nd div. To hide all the divs at once, we first find out all the class which are visible by filtering the results obtained by .style through :not(:hidden) . It returns all the classes which are visible. We then simply hide them all. To, hide elements one by one from the top, we further filter the selected object through :eq(0). It returns only one (first one) of its type.
You must have noted a new function stopImmediatePropagation() called just after our action is complete. This is to prevent the event from bubbling up the DOM tree. If it is removed, the event will be triggered once more. We did not require this function in all the cases, because in rest of them, the element concerned was already hidden after one execution.
.show() is similar to .hidden and is used in the same way as the .hide() has been used above. Our selector for last two cases will be simply (:hidden). :not filter is not required as we wish to take action on the hidden elements now.
It toggles the state of the element. If the element is visible initially, it will be invisible and vice versa.The last button in the above example toggles the state of all the buttons everytime it is clicked.We need to stop bubbling effect here, otherwise, it will toggle twice and we wont see any change.
Once we are done with some basic animation effects, lets see some more amazing jquery effects like fading in and out.