8 Energizing pages with animations and effects

This chapter covers

Showing and hiding elements without animation
Showing and hiding elements using core animation
Extending the core easing functions
Writing custom aniamtions
Controlling animation and function queuing

8.1 Showing and hiding elements

$('div').hide().addClass('fun');

8.1.1 Implementing a collapsible "module"

$('.icon-roll').click(function () {
  var $body = $(this).closest('.module').find('.body');
  if ($body.is(':hidden')) {
    $body.show();
  } else {
    $body.hide();
  }
});

8.1.2 Toggling the display state of elements

$('.icon-roll').click(function() {
  $(this).closest('.module').find('.body').toggle();
});

8.2 Animating the display state of elements

Show and hide
Fade in and fade out
Slide down and slide up

8.2.1 Showing and hiding elements gradually

hide(duration[, easing][, callback])
hide(options)
hide()
Parameters
duration (Number|String)
easing (String)
callback (Function)
options (Object)
Returns
The jQuery collection.

toggle(duration[, easing][, callback])
toggle(options)
toggle(condition)
toggle()
Parameters
condition (Boolean)
Returns
The jQuery collection.

$('.icon-roll').click(function() {
  var $icon = $(this);
  $icon.closest('.module').find('.body').toggle('slow', function() {
    $icon.text($(this).is(':hidden') ? '+' : '-');  
  });
});

8.2.2 Introducing the jQuery Effects Lab Page

8.2.3 Fading elements into and out of existence

fadeIn(duration[, easing][, callback])
fadeIn(options)
fadeIn()
Returns
The jQuery collection.

fadeOut(duration[, easing][, callback])
fadeOut(options)
fadeOut()
Returns
The jQuery collection.

fadeToggle(duration[, easing][, callback])
fadeToggle(options)
fadeToggle()
Returns
The jQuery collection

fadeTo(duration, opacity[, easing][, callback])
Parameters
opacity (Number)
Returns
The jQuery collection.

8.2.4 Sliding elements up and down

slideDown(duration[, easing][, callback])
slideDown(options)
slideDown()
Returns
The jQuery collection.

slideUp(duration[, easing][, callback])
slideUp(options)
slideUp()
Returns
The jQuery collection.

slideToggle(duration[, easing][, callback])
slideToggle(options)
slideToggle()
Returns
The jQuery collection.

8.2.5 Stopping animations

stop([queue][, clearQueue[, goToEnd]])
Parameters
queue (String)
clearQueue (Boolean)
goToEnd (Boolean)
Returns
The jQuery collection

finish([queue])
Parameters
queue (String)
Returns
The jQuery collection.

8.3 Adding more easing functions to jQuery

8.4 Creating custom animations

animate(properties[[, duration][, easing]][, callback])
animate(properties[, options])
Parameters
properties (Object)
duration (Number|String)
easing (String)
callback (Function)
options (Object)
Returns
The jQuery collection.

8.4.1 A custom scale animation

$('.animated-elements').each(function() {
  var $this = $(this);
  $this.animate({
    width: $this.width() * 2
    height: $this.height() * 2
    },
    2000
  );
});

8.4.2 A custom drop animation

$('.aniamted-elements').each(function(){
  var $this = $(this);
  $this.css('postion', 'relative').animate({
    opacity: 0,
    top: $(window).height() - $this.height() - $this.position().top
  },
  'normal',
  function() {
    $this.hide();
  }
  );
});

8.4.3 A custom puff animation

$('.animated-elements').each(function() {
  var $this = $(this);
  var position = $this.position();
  $this.css({
    position: 'absolute',
    top: position.top,
    left: postion.left
  }).animate({
    opacity: 'hide',
    width: $this.width() * 5,
    height: $this.height() * 5,
    top: position.top - ($this.height() * 5 / 2),
    left: position.left - ($this.width() * 5 / 2)
  },
  'fast'
  );
});

8.5 Animations and queuing

8.5.1 Simultaneous animations

$('#test-subject').animate({left: '+=256'}, 'slow');
$('#test-subject').aniamte({top: '+=256'}, 'slow');

console.log(1);
$('#test-subject').animate({left: '+=256'}, 'slow');
console.log(2);

"1" and "2" are printed immediately on the console

8.5.2 Queuing functions for exection

var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500);
$moonImage.animate({top: '+=256'}, 2500);
$moonImage.animate({left: '-=256'}, 2500);
$moonImage.animate({top: '-=256'}, 2500);

var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500, function(){
 $moonImage.animate({top: '+=256'}, 2500, function(){
 $moonImage.animate({left: '-=256'}, 2500, function(){
 $moonImage.animate({top: '-=256'}, 2500);
 });
 });
});

callback complicated

queue([name])
queue([name], function)
queue([name], queue)
Parameters
name (String)
function (Function)
queue (Array)
Returns
An array of functions for the first form. The jQuery collection for the remaining forms.

dequeue([name])
Parameters
name (String)
Returns
The jQuery collection.

var $images = $('img');
$images
 .queue('chain', function(next) {
 console.log('First: ' + $(this).attr('alt'));
 next();
 })
 .queue('chain', function(next) {
 console.log('Second: ' + $(this).attr('alt'));
 next();
 })
 .queue('chain', function() {
 console.log('Third: ' + $(this).attr('alt'));
 $(this).dequeue('chain');
 })
 .queue('chain', function() {
 console.log('Fourth: ' + $(this).attr('alt'));
 });

$('button').click(function() {
 $images.dequeue('chain');
 });

clearQueue([name])
Parameters
name (String)
Returns
The jQuery collection.

***delay(duration[, queueName])
Parameters
duration (Number|String)
queueName (String)

$('#my-image')
 .slideUp('slow')
 .delay(1000)
 .slideDown('fast');

8.5.3 Inserting functions into the effects queue

var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500);
$moonImage.animate({top: '+=256'}, 2500);
$moonImage.queue('fx',
 function() {
 $(this)
 .css({backgroundColor: 'black'});
 .dequeue('fx');
 }
);
$moonImage.animate({left: '-=256'}, 2500);
$moonImage.animate({top: '-=256'}, 2500);

$moonImage.animate({top: '-=256'}, 2500, function() {
 $(this).css({backgroundColor: 'white'});
});

8.6 Summary

animate()
show() and hide()
toggle()
fadeOut() and fadeIn()
fadeToggle()
fadeTo()
slideUp() slideDown()
slideToggle()
queue animations