Learning jQuery

The Navigation Bar

Take your mouse and hover over each of the navigation links above. The dark red colour that you see is achieved using a simple jQuery function. It is dynamically adding a class of 'hover' which is styled specifically in my stylesheet.

This uses jQuery's .addClass();, .removeClass(); and .hover(); functions.

(Of course this can be done with pure CSS, and in the real world of web development it would be).

Function #1 Link

Go ahead and give the link a few clicks...How does that work you ask? In this example, jQuery animates the width of the page to become smaller and when it is clicked again, the width returns to its original size by altering the CSS dynamically. This was achieved by assigning a local variable and using a simple if-else statement which determines the width of page.

jQuery functions used;

.click();
.animate();

Function #2 Link

If you click the second link, the whole content area of the page will slide up out of your view. To view the content again, all you have to do is simply click the button again.

jQuery functions used;

.click();
.slideToggle();

Function #3 Link

In this example when you click the link, the header section of the website fades away, to make it re-appear, all you have to do is click the link again. This is a clean and powerful effect that could have a wide range of uses in  front-end development.

jQuery functions used;

.click();
.fadeToggle();

Function #4 Link

When the link is clicked you will see that the size of the font changes gracefully. The code targets all of the <p></p> selectors in the HTML markup and changes the size to 20px, the titles don't change as they aren't encapsulated in paragraph tags.

jQuery functions used;

.click();
.animate();

Function #5 Link

In the final example link I have included 3 of the 5 functions which are all triggered to run on the click event. This just shows the utter power of jQuery and some of its great functionality to mix functions.

jQuery functions used;

.click();
.animate();
.fadeToggle();
.slideToggle();