layervault / jquery.image.fadeto.js

A jQuery library for cross-fading images on the fly.

Usage

Fade an image from one src to another, all with one line of JavaScript.

$('img').fadeToSrc("http://images.com/new_image.png");

You can also give it a few options:

$('img').fadeToSrc("http://images.com/new_image.png", {
  fadeInLength: 1000,
  fadeOutLength: 2000,
  fadeInEasing: 'ease-in',
  fadeOutEasing: 'ease-out'
});

Or even a callback:

$('img').fadeToSrc("http://images.com/new_image.png", function () {
  alert("We're done!");
});

Installation

Just include jquery.image.fadeto.js as a script tag on the page. Bonus points for incorporating it into your asset pipeline.

About

jquery.image.fadeto.js was originally developed for LayerVault by Kelly Sutton.

You can see more projects from LayerVault in the LayerVault Cosmos.