Effects

Order: oldest first | newest first
Feb
06
2009

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 »

Levels: Beginner | Categories: Effects | 44 Comments »

Feb
02
2009

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 30 different easing methods, courtesy of Robert Penner’s easing equations. Let’s check some of them out.

Read the rest of this entry »

Levels: Beginner | Categories: DOM Traversing, Effects | 22 Comments »

Jan
20
2009

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 to code and move on to more important tasks. However, sometimes the animation queue just gets in the way. Read the rest of this entry »

Levels: Beginner | Categories: Effects | 63 Comments »

Feb
12
2008

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. The .show() and .hide() methods, when used without a speed, will immediately show and hide the matched set of elements with no animation. When the speed argument is included, the matched elements are shown and hidden gradually by animating their height, width, and opacity simultaneously. The .toggle() method shares its name with a method that takes two arguments that alternate being triggered. All of the other effect methods have a default speed of 400ms.

Read the rest of this entry »

Levels: Intermediate | Categories: Effects, Plugins | 61 Comments »

Oct
20
2007

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 highlighter just can't handle the regular expression with two slashes in it ("//") and is incorrectly treating them as a comment mark.] See the answer below the code.

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a[href*=#]').click(function() {
  3.     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  4.     && location.hostname == this.hostname) {
  5.       var $target = $(this.hash);
  6.       $target = $target.length && $target
  7.       || $('[name=' + this.hash.slice(1) +']');
  8.       if ($target.length) {
  9.         var targetOffset = $target.offset().top;
  10.         $('html,body')
  11.         .animate({scrollTop: targetOffset}, 1000);
  12.        return false;
  13.       }
  14.     }
  15.   });
  16. });

Read the rest of this entry »

Levels: Beginner, Intermediate | Categories: DOM Modification, DOM Traversing, Effects, Events | Filed under: Announcement | 59 Comments »

Sep
16
2007

Animated Scrolling with jQuery 1.2

A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone.

Update

I have since written an entry outlining an improved script for animating same-page links. It also contains a link to Ariel Flesler's excellent scrollTo plugin.

Also, Zachary Johnson has made a couple other improvements to the script. Make sure you read through the comments.

Read the rest of this entry »

Levels: Beginner, Intermediate | Categories: Effects | 99 Comments »