Let's make our Fancybox take a whole second to display and close. We can do this using the openSpeed and closeSpeed settings. All of the animation durations are in milliseconds.

$('.fancybox').fancybox({
  openSpeed: 1000,
  closeSpeed: 1000
});

Now our Fancybox pop up will take one second (1000 milliseconds) to open and close. The default for these settings is 250 milliseconds.

We can also set the speed that it takes to switch between images using the nextSpeed and prevSpeed settings. Let's make this transition also take 1000 milliseconds, as shown in the following code:

$('.fancybox').fancybox({
  openSpeed: 1000,
  closeSpeed: 1000,
  nextSpeed: 1000,
  prevSpeed: 1000
});

Now all of our animations will take an entire second to run. The default for these settings is also 250 milliseconds.

Next let's look at changing the effect that Fancybox uses to open and close. To change the effect, we use the openEffect and closeEffect settings. We have three options to select from: fade, elastic, and none. The default option is fade, which makes Fancybox fade in and out when it is opened and closed. That's pretty boring, so let's use elastic instead.

$('.fancybox').fancybox({
  openSpeed: 1000,
  closeSpeed: 1000,
  nextSpeed: 1000,
  prevSpeed: 1000,
  openEffect: 'elastic',
  closeEffect: 'elastic'
});

Now the Fancybox pop up starts small and expands. We can also set the effect to none, which turns the animation off.

We can also apply these same effects to the animations between images in the slideshow. Let's make the transition between images just fade in and out. By default, Fancybox uses elastic for the image transitions. We use the nextEffect and prevEffect settings to change the effect of the next and previous image animations, as shown in the following code:

$('.fancybox').fancybox({
  openSpeed: 1000,
  closeSpeed: 1000,
  nextSpeed: 1000,
  prevSpeed: 1000,
  openEffect: 'elastic',
  closeEffect: 'elastic',
  nextEffect: 'fade',
  prevEffect: 'fade'
});

Now the transition between images in the slideshow will just be a simple fade in and out. You can also set these settings to none, which will just switch the images without any animation.

The last setting to change is easing. We can change easing for the different animations in the exact same way as the previous two settings. We can change the open and close easing using openEasing and closeEasing. We can change the next and previous easing using nextEasing and prevEasing. Let's change these to use the linear easing curve, as shown in the following code:

$('.fancybox').fancybox({
  openSpeed: 1000,
  closeSpeed: 1000,
  nextSpeed: 1000,
  prevSpeed: 1000,
  openEffect: 'elastic',
  closeEffect: 'elastic',
  nextEffect: 'fade',
  prevEffect: 'fade',
  openEasing: 'linear',
  closeEasing: 'linear',
  nextEasing: 'linear',
  prevEasing: 'linear'
});

Now our animation will have no easing. Using the linear easing curve means that our animation speed will be constant throughout the entire duration of the animation. These two, linear and swing, are the only two easing curves available in standard jQuery.