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).
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();
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();
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();
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();
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();