Karl Swedberg

• Web Developer, Fusionary Media
• Member, jQuery Project Team (Developer Relations)
• Author and Editor, jQuery books

  

  

• Twitter: @kswedberg

Outline

• Effect “Gotchas”
• Problems & Solutions
• Fun Stuff

Before We Begin

• Effects are cool
• Effects are pretty
• Effects can be very, very annoying
• Handle with care

* Most of the animations in this presentation are slower than advisable on a real production site.

Gotchas

• Sometimes even the smallest details can trip us up.
• Sometimes we need a reminder.
• And sometimes we just have a “doh!” moment.

Effects Manipulate Style Properties

• May conflict with CSS style rules.
• You may need to explicitly remove a style added by an animation: e.g.

  $('.somediv').css('display', '');

• You may want to consider using CSS3 transitions and fall back to jQuery effects for non-supporting browsers
• Modernizr can help

.animate( ) Properties

• Can use DOM property (camelCase) or CSS property (hyphenated-words) syntax.
  jQuery converts CSS syntax to DOM syntax before applying
• Can animate many style properties: left, top, width, height, padding, margin, borderWidth, opacity, fontSize, and so on
• Can animate some non-style properties: scrollLeft, scrollTop, and so on
• Can animate custom properties

Animation Properties (gotchas)

But…

• If you hyphenate a property name, you must put it in quotes.
• You can not animate color properties: color, backgroundColor, borderColor
• For color, you need a color plugin or the jQuery UI effects module.
• A few other style properties cannot be animated: z-index, backgroundImage, overflow, and so on

.animate( ) Property Values

Properties can be animated by:

• fixed unit: number, percent, etc.
• relative unit: ("+=200px", "-=20%", etc.)
• keyword: "hide", "show", or "toggle"

…as long as the property allows it (e.g. opacity: only 0-1)

A Few More Gotchas

• To animate top, right, bottom, or left property, the element must have position: relative/absolute/fixed, not the default position: static
• Animating both bottom and top—or both left and right—properties can lead to unexpected results
• Most multi-value shortcut properties cannot be animated: font, border, text-shadow, and so on
• Border width will not animate unless the element has at least a border style applied.

Property Values Demo

$('div.bar').animate({

: 

: 

})

Callback Gotchas

• They fire when you might not expect them to.
• They fire once per element.

Unexpected Callback Demo

Table Animation Gotchas

Let's Solve Some Problems

Animated Scrolling

The Problem:

• Finding the right scrollable element can be challenging.
• $('html, body') can be problematic.
• Better to pick one anyway.
• Let's make a plugin!

.firstScrollable( )

  $.fn.firstScrollable = function(dir) {
    var scrollable = [], scrolled = false;
    var scrollDir = /left$/i.test(dir) ? 'scrollLeft' : 'scrollTop';
    
    this.each(function() {
      if (this == document || this == window) { return; }
      var el = $(this);
      if ( el[scrollDir]() > 0 ) {
        scrollable = [this];
        return false;
      }

      el[scrollDir](1);
      scrolled  = el[scrollDir]() > 0;
      el[scrollDir](0);
      if ( scrolled ) {
        scrollable = [this];
        return false;
      }
    });
    return this.pushStack(scrollable);
  };

.firstScrollable( ) Usage

$('html, body')
  .firstScrollable()
  .animate({scrollTop: '+=200px'}, 800);

Slide in Different Directions

The Problem:

• I want .slideDown() to slide up!
• But when I slide something up, it just hides it.

Slide Oppositely

The Background: What .slideUp() and .slideDown() really mean...

• .slideUp(): animate elements' height, padding-top, padding-bottom, margin-top, and margin-bottom properties from current value to 0.
• .slideDown(): animate elements' height, top and bottom padding, and top and bottom margin from 0 to their full values

Let's Slide Oppositely

So, all we need is a little CSS to switch things up:

.container { position: relative; }
.slidy {
  position: absolute;
  bottom: 0; /* here we are! */
}

<div class="container">
  <div class="slidy">slidy</div>
</div>

  $('div.slidy').slideToggle(1200);

Slide Oppositely Demo

Slide Upside Down

.fadeToggle()

The Problem:

• We got your .slideToggle()
• We even got your jam-packed .toggle()
• But we don't have a .fadeToggle()

A Clue Under the Hood

All shortcut methods use .animate() internally.

jQuery.each({
  slideDown: genFx("show", 1),
  slideUp: genFx("hide", 1),
  slideToggle: genFx("toggle", 1),
  fadeIn: { opacity: "show" },
  fadeOut: { opacity: "hide" }
}, function( name, props ) {
  jQuery.fn[ name ] = function( speed, easing, callback ) {
    return this.animate( props, speed, easing, callback );
  };
});

Simple .fadeToggle() Plugin

We can do the same thing:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

And use it like the other shortcuts:

$('#myid').fadeToggle();

$('#myid').fadeToggle('slow');

$('#myid').fadeToggle('slow', function() {
  // do something
});

Little Less Simple Plugin

Problem: I need something more robust. I need a plugin that will…

• Allow choice of effect (property) to be toggled
• Provide default effect of opacity
• Allow for either a single speed to be used for both show and hide or two speeds in a [showSpeed, hideSpeed] array

The Solution...

Little Less Simple .toggleEffect()

.toggleEffect() Plugin

$.fn.toggleEffect = function(effect, speed, easing, callback) {
  var args = Array.prototype.slice.call(arguments);
  if (effect == undefined || typeof effect != 'string' || effect in $.fx.speeds) {
    args.unshift('opacity');
  }
  var prop = {};
  prop[ args[0] ] = 'toggle';
  speed = args[1];
  easing = args[2];
  callback = args[3];

  if ( !$.isArray(speed) ) {
    return this.animate(prop, speed, easing, callback);
  }
  return this.animate(prop, this.is(':hidden') ? speed[0] : speed[1], easing, callback);
};

.toggleEffect() Usage

Now we can do this sort of thing:

// toggle opacity w/ defaults
$('some selector').toggleEffect();

// toggle height at 200ms
$('some selector').toggleEffect('height', 200)

// fade in at 800ms; fade out at 800ms
$('some selector').toggleEffect('opacity', [800, 450])

// toggle width slowly with linear easing
// and call the doSomething function when animation is complete
$('some selector').toggleEffect('width', 'slow', 'linear', doSomething)

Chunky or Smooth?

The Problem:

• My animations aren't smoooooth enough

Ease Up a Little

Easing

// 'swing' is default, so unnecessary
$('#swing').slideToggle(1200, 'swing');

// same velocity throughout. *in core*
$('#linear').slideToggle(1200, 'linear');

// all others require plugin*
$('#easeInOutBounce').slideToggle(1200, 'easeInOutBounce');

• Easing plugin comes with jQuery UI
• Stand-alone Easing plugin

Easing Demo

Limit Concurrent Animations

Avoid this sort of thing:

$('p').slice(1) // select paragraphs 2–20.
.slideDown();

Do something like this instead:

// first wrap 'em up.
var paragraphWrapper = $('p').slice(1)
.wrapAll('<div></div>')
  .parent();
// then animate the wrapper
paragraphWrapper.slideDown();

Tweak $.fx.interval

• By increasing the time between steps, you may be able to tax the CPU a little less.
• But too much will make it worse.

Shortcuts with the Works

The Problem: This doesn't work in jQuery 1.4.2 or below:

$('#combo').fadeOut(800, 'linear', function() {
  $(this).fadeIn();
});

$('#combo').fadeOut({
  duration: 800,
  easing: 'linear',
  complete: function() {
    $(this).fadeIn();
  }
});

The Works Demo

// clickie on the combo. Then...
$(this).parent().prev().fadeOut({
  duration: 800,
  easing: 'linear',
  complete: function() {
    $(this).fadeIn(750);
  }
});

Shortcuts with the Works

// as of jQuery 1.4.3, this now works

$('#combo').fadeOut(800, 'linear', function() {
  $('#something-else').fadeIn();
});

Animation Order

The Problem:

• I want my animations to happen one after the other, but they're happening at the same time.
• No, wait! Now they're happening one after other.
• What gives?

Default Queue Behavior

The Background:

• All animations are added to an "fx" queue by default
• A separate queue is used for each element
• So, chaining animations to an element will create sequential effects
  

  $('.myclass).slideDown().slideUp().fadeIn();

• But, animating different elements will create virtually simultaneous effects
  

  $('.myclass).slideDown();
  $('.yourclass).slideDown();
  

Modifying the Queue Behavior

We can change this default queue behavior by:

• setting the queue option
  

  $('.myclass).slideDown()
  .animate({opacity: 'show'}, {queue: false});

• using a callback function
  

  $('.myclass).slideDown(function() {
    $('.yourclass).slideDown();        
  });

Using the .queue() Method

• Rather than chain methods or use a callback function, you can add items to an element's queue directly.
• Using the .queue() method makes it easy to have non-animation methods occur within a sequence as well.
• Animations use the default "fx" queue, but you can name your own for other things (like sequential Ajax calls).
• Read more on the API documentation: .queue(), .dequeue(),

Queue Example

var $queuewrap = $('#queuewrapper'),
    $queue1 = $queuewrap.find('.demodiv').eq(0),
    $queue2 = $queuewrap.find('.demodiv').eq(1);

// .queue() callback functions
var greenify = function(next) {
  $(this).css({backgroundColor: '#090'});
  next();
};
var slideFirst = function(next) {
  $queue1.slideToggle();
  next();
};
var slideSecond = function(next) {
  $queue2.slideToggle().queue(greenify);
  next();
};

Queue Example (continued)

$queuewrap.find('button').click(function() {
  $queue1.queue(slideFirst)
         .queue(greenify)
         .queue(slideSecond);
});

Callbackitis

The Problem:

• Anonymous functions are contagious!
• And jQuery made me sick!
• Doctor, I need some medicine!

Callbackitis

The Evidence:

$('.mydiv').eq(0).fadeOut('slow', function() {
  $('.mydiv').eq(1).fadeOut('slow', function() {
    $('.mydiv').eq(2).fadeOut('slow', function() {
      $('.mydiv').eq(3).fadeOut('slow', function() {
        $('.mydiv').eq(4).fadeOut('slow', function() {
          // abandon all hope
        });
      });
    });
  });
});

Callbackitis

The Solution:

• Take two recursive functions
• and a named function
• and call me in the morning.

Callback Tip

• You don't have to inline your function expressions
• Functions declarations are A-okay, too

var myCallback = function() {
  // I'mma gonna do something
}
function yourCallback() {
  // You do something, too!
};

$('.mydiv).slideUp(250, myCallback);
$('.yourdiv).slideUp(250, yourCallback);

Repeating Callbacks

(Thanks, Dave!)

var $sequence = $('div.sequence'),
    index = 0;

(function sequencer() {
    $sequence.eq(index++)
    .animate({opacity: 'toggle'}, 'slow', sequencer);
})();

Repeating Callbacks Demo

Go!

More Repeating Callbacks

var $pulse = $('div.pulse'),
    index = 0,
    total = 10;

(function pulse() {
  if (index++ < total) {
    $pulse
    .animate({opacity: 'toggle'}, pulse);
  }
})();

More Repeating Callbacks Demo

Pulse!

Pulsee Plugin!

$.fn.pulsee = function(options) {
  var counter = 0, self = this;
  var opts = $.extend({}, $.fn.pulsee.defaults,
    typeof options === 'number' ? {total: options} : options || {}
  );

  (function pulse() {
    if (counter++ < opts.total) {
      self.animate({opacity: 'toggle'}, opts.duration, opts.easing,
        function() {
          opts.complete.call(this, counter-1);
          pulse();
        }
      );
    }
  })();

  return self;
};
$.fn.pulsee.defaults = {total: 10, complete: $.noop};

Pulsee Plugin Demo!

var colors = ['#900', '#090', '#009', '#cc0', '#0cc', '#c0c'];
var pulseOpts = {
  total: 9,
  duration: 489,
  complete: function(i) {
    this.style.backgroundColor = colors[i % 6];
  }
};
$('#pulseer').click(function() {
  $('div.pulsee').slice(0,5).pulsee(11);
  $('div.pulsee').slice(5).pulsee(pulseOpts);
});

Pulse!

Horizontally Sliding Panels

A more complex, "real-world" example

Runaway Animations

The Problem:

• Repeated user interactions pile up effects queue.
• Animations keep running, long after user finishes.

The :animated Selector

• Good solution for click events

$('#fadeinout').click(function() {
    var $div1 = $('#inoutwrap').find('div.demodiv').eq(0);
    var $div2 = $('#inoutwrap').find('div.demodiv').eq(1);

    $div1.fadeIn().fadeOut();

    if ( !$div2.is(':animated') ) {
      $div2.fadeIn().fadeOut();  
    }
});

An :animated Selector Demo

The .stop() Method

• Stop current animations from continuing.
• Two arguments: clearQueue and gotoEnd (both Boolean)
• Looks like this:

  .stop()

• Or this:

  .stop(true, true)

• Or some other combination of those arguments

A .stop() Example

$('#badges li').hover(function(){
  $(this).stop(true, true)
         .animate({bottom:"30px"}, 200);
}, function(){
  $(this).stop(true, false)
         .animate({bottom:"8px"}, 500);
});

See it in action

A .stop() Demo

$drop.slideDown(800);
$drop.slideUp(800);

$drop.stop(false, true).slideDown(800);
$drop.stop(true, true).slideUp(800);

$drop.stop(true, true).slideDown(800);
$drop.stop(true, false).slideUp(800);

if ( event.type === 'mouseenter' ) {  
  $drop
  .stop(true, true)
  .css('height', $drop.data('height'))
  .slideDown(800);
} else {
  $drop.stop(true, false).slideUp(800);
}

Stopping Effects Can Be Tricky

// first, store full height in element's .data()
// then...
$('#nav4 > li').bind('mouseenter mouseleave', function(event) { 
  if ( event.type === 'mouseenter' ) {  
    $drop
    // if animating, sets display: none
    .stop(true, true)
    // so setting height won't make visible
    .css('height', $drop.data('height'))
    // and now it knows what to slide down to
    .slideDown(800);
  } else {
    $drop.stop(true, false).slideUp(800);
  }
});

Catch Me If You Can

The Problem:

• I want something to trigger in the middle of an animation
• But I don't know exactly when

The Solution:

• Use the step option

The Step Option

var $ball = $easingDiv.find('div.demodiv');
$easingDiv.find('button').click(function() {
  var $button = $(this), hit = false;
  var mystep = function() {
    if (!hit && 298 <= $ball.height() + 
      parseFloat($ball.css('top')) + 
      parseFloat($ball.css('marginTop')) 
    ) {
      $button.after('SMACK!');
      hit = true;
    }
  };
  $easingDiv.find('div.demodiv').animate(props, {
    duration: 5000, 
    easing: 'linear',
    specialEasing: myEase,
    step: mystep
  });
});

Step Option Demo

Stop the Madness

The Problem:

• I need to stop animations altogether,
• Or at least provide the option to do so (for a11y).

The Solution:

$.fx.off = !$.fx.off

Default Animation Speed

The Problem:

• I don't like the default animation speed.
• It's too slow!
• No, wait! It's too fast!

Global Duration Change

The Clue:

• Internally, jQuery uses $.fx.speeds to set the default duration, as well as the duration values for 'slow' and 'fast'

// from jQuery core...
opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? 
  opt.duration :
  jQuery.fx.speeds[opt.duration] || jQuery.fx.speeds._default;

// ....
jQuery.extend(jQuery.fx, {
  speeds: {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
  },
  // ...
});

Global Duration Change

The Solution:

• We can change these values, or add our own keywords, by tapping into this $.fx.speeds object

$.extend($.fx.speeds, {
  _default: 300,
  crawl: 1200
});

jQuery History Lesson

/*
 * jQuery (jquery.com)
 * ...
 * 
 * $Date: 2006-05-12 12:52:18 -0400 (Fri, 12 May 2006) $
 * $Rev: 29 $
 */
// ...
var ss = {"crawl":1200,"xslow":850,"slow":600,
          "medium":400,"fast":200,"xfast":75,"normal":400};

Pause

The Problem:

• Callbacks are nice, but I need some sort of delay between animations.

A (non-)?Solution

• You could kick it old skoolz.
• But it's hackish...

$('#me-me').fadeIn().animate({snooze: true}, 1200).fadeOut();

delay

Another Solution

• jQuery 1.4 has a .delay() method.
• It's quite simple.
• But maybe it's too simple?

$('#delayee').fadeIn(800).delay(3000).fadeOut(600);

Delaying Animations

• Okay, it's not that inflexible...
• When used with .queue()

$('#delayez')
.fadeIn(800)
.delay(1500)
.queue(function(next) {
  $(this).css('backgroundColor', '#090');
  next();
})
.delay(1500)
.fadeOut(600);
});

setTimeout

Yet Another Solution

• Consider using setTimeout and clearTimeout.
• But be careful with this.

$('#me-too').fadeIn(backout);

function backout() {
  var self = this;
  setTimeout(function() {
    // you probably don't want to use "this" here.
    $(self).fadeOut();
  }, 2000);
}

doTimeout

• Or, better yet, use Ben Alman's doTimeout plugin.

$('#me-three').fadeIn(function() {
  $(this).doTimeout(1800, function() {
    this.fadeIn();
  });
});

Fun Stuff

Multi-property Easing

• Introduced in jQuery 1.4 (Thanks, James!)
• If we animate more than one property, we can apply different easing equations to each one:

$('div.demodiv').animate({
  left: '300px',
  top: '245px',
  width: 0,
  height: 0,
  marginTop: '55px'
}, {
  duration: 5000, 
  easing: 'linear',
  specialEasing: {
    left: 'easeOutQuad',
    top: 'easeOutBounce'
  }
});

Multi-property Easing Demo

Custom Properties

(Thanks, John!)

$.fx.step.corner = function(fx) {
  fx.elem.style.top = fx.now + fx.unit;
  fx.elem.style.left = fx.now + fx.unit;
};

// usage
$('#cornerify').click(function() {
  $('div.cornered').animate({corner: '40px'}, 500);
});

Custom Properties Demo

Custom Properties

$.fx.step.leftTop = function(fx) {
  fx.elem.style.left = fx.now + fx.unit;
  fx.elem.style.top = fx.now + fx.unit;
};

// allow start from a point other than 0 based on "left"
var _oldcur = jQuery.fx.prototype.cur;
jQuery.fx.prototype.cur = function( force ) {

if (this.prop == 'leftTop') {
  // change this.prop to 'left'
  var r = parseFloat(jQuery.css(this.elem, 'left', force));
	return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, 'left')) || 0;
}

return _oldcur.call(this, force);
};

Custom Properties Demo

$('#topleftify').click(function() {
  $('div.cornered').animate({corner: '+=40px'}, 500);
  $('div.left-topped').animate({leftTop: '+=40px'}, 500);
});

More Fun Stuff

• jQuery UI Effects
• Spritely
• jQuery CSS Transitions
• jQuery Roundabout
• jQuery Path
• Processing.js

Fun Stuff

Multi-property Easing

• Introduced in jQuery 1.4 (Thanks, James!)
• If we animate more than one property, we can apply different easing equations to each one:

$('div.demodiv').animate({
  left: '300px',
  top: '245px',
  width: 0,
  height: 0,
  marginTop: '55px'
}, {
  duration: 5000, 
  easing: 'linear',
  specialEasing: {
    left: 'easeOutQuad',
    top: 'easeOutBounce'
  }
});

Multi-property Easing Demo

Custom Properties

(Thanks, John!)

$.fx.step.corner = function(fx) {
  fx.elem.style.top = fx.now + fx.unit;
  fx.elem.style.left = fx.now + fx.unit;
};

// usage
$('#cornerify').click(function() {
  $('div.cornered').animate({corner: '40px'}, 500);
});

Custom Properties Demo

Custom Properties

$.fx.step.leftTop = function(fx) {
  fx.elem.style.left = fx.now + fx.unit;
  fx.elem.style.top = fx.now + fx.unit;
};

// allow start from a point other than 0 based on "left"
var _oldcur = $.fx.prototype.cur;
$.fx.prototype.cur = function( force ) {

if (this.prop == 'leftTop') {
  // change this.prop to 'left'
  var r = parseFloat($.css(this.elem, 'left', force));
	return r && r > -10000 ? r : parseFloat($.curCSS(this.elem, 'left')) || 0;
}

return _oldcur.call(this, force);
};

Custom Properties Demo

$('#topleftify').click(function() {
  $('div.cornered').animate({corner: '+=40px'}, 500);
  $('div.left-topped').animate({leftTop: '+=40px'}, 500);
});

More Fun Stuff

• jQuery UI Effects
• Spritely
• jQuery CSS Transitions
• jQuery Roundabout
• jQuery Path
• Processing.js

Thank You!

Thanks so much for listening.

• This presentation will be available soon at pres.learningjquery.com/jqcon2010
• All demo code can be found in demos.js and demo-plugins.js
• If you have any questions or comments about the presentation, please contact me.

Tomtar credits:

• tomtar.se
• senorcafe.com
• Brian Froud and Alan Lee