(function($) {
$.fn.transictionto = function(options) {
var settings = $.extend({
}, options || {});
//wrap into div if no div is present.
$(this).each(function() {
if ($(this).parent('div').size() == 0) {
$(this).wrap('')
}
//now swap with background trick
$(this)
.parent()
.css('background-image', 'url(' + settings.destinationImage + ')')
.css('background-repeat', 'no-repeat')
.end()
.fadeOut(1000, function() {
this.src = settings.destinationImage;
$(this).show();
});
});
};
})(jQuery);
/*
the code is really simple, first of all if the image is not contained in a div I wrap it into a div. This can change a little the layout of the page, so I suggest for every image that need to be swapped with another image to be originally enclosed in a div to make the transition happens. Next I set the new image as the div background, set the background-repeat to “no repeat”, then fade out the original image. When the original image fades out it slowly merge with the new image into the background. Finally when the fading out is completed I change the source of the image and finally show the image again.
You can use this plugin with great easy.
