Transitioning jQuery Effects

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.

This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.

Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page usingfadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.

Create a better jQuery stylesheet switcher

Normal way

First, I'll show how jQuery users normally would change their CSS file.

HTML

This is the trimmed down version of the HTML file. As you can see, there is one style.css placed in the head and there are three links to color changers.

Nothing really fancy going on here - just the markup that we need for the page.

CSS

Now straight to the important part of the CSS file: The colorchanger. We'll turn the links into block elements.

As you can see, the boxes each have their own color and hover effect. We'll now use jQuery to actually change the stylesheet when the user clicks on one of these links.

JQuery

After loading jQuery, we can now use it's power to change the link-element in the HTML-head (the place where we defined the first CSS sheet: style.css).

This works great! Every time the user clicks on one link, the stylesheet gets replaced. Now the only thing we have to do, is define how the CSS should look like when switching colours.

Поиск по сайту: