Advanced jQuery: Two Common jQue

jQuery can do some animation to make some good effects to interactive with pages. There are two broad categories of effects:fading and sliding.

fadeOut() and fadeIn()

It basically fades an element out or in, and you can provide a duration if you want it to be slow or fast.

I start to create a simple HTML page which include three divs and one button. I also add some style for these divs to make effect later.

The page has three boxes and one click button. The point is that when we click the button, those three boxes will make some effect.

If we want those boxes fade out as I click the button, we can select the “button”, then set “click” event type inside on(), and pass the function. In the function, we select the “div”, and use set a duration in the fadeOut(). The duration is given in milliseconds. 1000 milliseconds equal to 1 second.

As I click the button, all of the boxes are hided in one second.

The fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the “display” property is set to “none”, so the element no longer affects the layout of the page. (From jQuery.com)

If we want those hidden boxes appear again as I click the button, I can just change the “fadeOut” to “fadeIn” in the function.

slideUp() and slideDown()

It takes an element which is currently not showing and animates the height of an element.

If I want to those boxes slide up as I click the button, I only need to change the “fadeIn” or “fadeOut” to “slideUp” and keep the rest function same. 

If we want those boxes show up again, we need to change “slideUp” to “slideDown”, so those boxes will slide from top to bottom.