.hide( [duration,] [easing,] [callback] )

  • Duration :- decides the actual time the animation will run
  • Easing :- A string indicating whether easing function has too be used for transition or not
  • Callback :- A function which is called once the animation is over.

  • Without any arguments passed to the method, causes the selected object to hide immediately. We will explain other effects through an example :-

    Hide simply
    Hide in 3 seconds
    I 'm in hurry
    I will shout
    Hide all
    Hide one by one from top







    Show all
    Toggle all
    
    
    Hide simply
    Hide in 3 seconds
    I am in hurry
    I will shout
    Hide all
    Hide 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.

    .toggle()

    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.

    Member Login

    Member Login




    Not a Member? Sign Up!




    Login to comment

    Be the first to comment on this topic







      


    <<< Wanna review

    Continue >>>