If you want to smoothly fade multiple images at the same time, you can achieve that with the code below:
/* This function is designed to be utilized on 'img' tags. It has been enhanced to accommodate more than one image for transitioning purposes. The first image should be in the options argument, while the subsequent images are provided in the more_images argument as a string array in the following format:
* ["400|1000|apple.png","800|apple2.png", "apple3.png"]
* Each element in the array consists of pipe-separated values representing delay, duration, and the image source.
* With 3 elements present, they denote delay|duration|image
* With 2 elements, they represent duration|image
* And with only one element, it signifies the image itself. The default delay is zero and the default duration is 800
*
* If you intend to transition between just two images without additional animations, you can ignore the more_images argument.
* External scripts can check if an animation is currently running by verifying the presence of the attribute data-anim in the parent div of the animated img element. This feature is valuable for external scripts to determine when transitions have concluded (e.g., within a setinterval call)*/
jQuery.fn.transictionto = function(options, more_images) {
var settings = jQuery.extend({
}, options || {});
//wrap into div if no div is present.
$(this).each(function() {
if ($(this).parent('div').length == 0) {
$(this).wrap('<div></div>')
}
//mark to check if animation is in being done
$(this).parent().attr('data-anim','1');
//now swap with background trick
$(this)
.parent()
.css('background-image', 'url(' + settings.destinationImage + ')')
.css('background-repeat', 'no-repeat')
.end()
.fadeOut(settings.duration, function() {
this.src = settings.destinationImage;
$(this).show();
if (more_images != null && more_images.length) {
var im = more_images.shift().split('|');//shift shrinks array
var dly = im.length == 3 ? parseInt(im[0],10) : 0;
var drt = im.length > 1 ? parseInt(im[im.length-2],10) : 800;
$(this).delay(dly).transictionto({ destinationImage: im[im.length-1], duration: drt }, more_images);
} else {
$(this).parent().removeAttr('data-anim');
}
});
});
}
$(function() {
$('a.panel-home').click(function(){
destImage = "<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg";
$("#bgimg").transictionto({ destinationImage: destImage, duration: 800 });
return false;
});
});
This time, ensure the transictionto() function is invoked on the img element.