Effects

Tab Navigation with Smooth Horizontal Sliding Using jQuery

In this tutorial I'll show you how to create a navigation menu that slides horizontally. It begins with a set of "tabs" on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I've never […]
Read the rest of this entry »

Slide Elements in Different Directions

Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do.
Read the rest of this entry »

Quick Tip: Add Easing to Your Animations

Easing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration. jQuery has two built-in easing methods: linear and swing. While they get the job done, they are pretty boring when compared to what's made available through the jQuery easing plugin. The jQuery easing plugin offers […]
Read the rest of this entry »

Quick Tip: Prevent Animation Queue Buildup

You've probably stumbled upon a navigation powered by some jQuery effects during your web adventures. Of course you then ran your mouse back and forth over the navigation really fast to watch the animation repeat itself over and over and over again. The natural queuing of animations/effects by jQuery makes the typical animation super easy […]
Read the rest of this entry »

Simple Effects Plugins

jQuery has a nice selection of core animation effects, such as .show('speed') and .hide('speed'), .slideUp() and .slideDown(), and .fadeIn() and .fadeOut(). It even has a couple methods for toggling effects — the aptly named .toggle('speed') and .slideToggle(). All of these methods have optional speed, easing, and callback arguments — although a couple are special cases. […]
Read the rest of this entry »

Improved Animated Scrolling Script for Same-Page Links

After posting the last entry on animated scrolling with jQuery 1.2, I realized that I had left out an important piece of code. Actually, I didn't discover it until someone notified me that another page on the site was broken. Can you spot the problem(s)? [Note: the problem is not in line 3. The syntax […]
Read the rest of this entry »