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