HIDE / FADE / ANIMATE

HIDE / FADE / ANIMATE

Any HTML element (e.g., p, div) or CSS selector (e.g., #myID, #myClass) can be targeted with jQuery.

In this example, if you wanted to SEE the value that gets animated, you can view the page using a Developer Tool like Firefox's Inspect Element.
It will show you the element that is being animated in real time. It will also show you want attributes or elements get "injected" into a
DOM element and which elements have an event handler attached to it.

  1. In Firefox, right click on the page and select Inspect Element (Q).
  2. Examine the attribute that was added (e.g., style="display:none").



  3. Click on the Hide / Fade / Animate button.

    CHECK POINT: Notice how the left properties updates from 1-200px as the animation moves. Also notice how the display attribute
    changed from none to block and that a new attritubute, the left property, was added with a value of 200px once the animation was completed.



  4. To view the animation again, refresh (F5) the page and click on the button again.