jQuery background image rotation script - looking to modify

Question

I'm using this nice little jQuery script to rotate a background image:

http://www.diplo.co.uk/blog/2011/2/23/simple-jquery-background-image-rotator.aspx

The jQuery in question is here:

(function($)
{
    $.fn.extend({
        bgrotate: function(options)
        {
            var defaults = {
                delay: 1000,
                images: [],
                imagedir: "/images/"
            }

            var o = $.extend(defaults, options);
            var $obj = $(this);
            var cache = [];
            var i = 0;
            var preCache = true;

            return this.each(function()
            {
                setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
            });

            function setBack(elem, backgrounds, imagedir)
            {
                elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                i++;
                if (i == backgrounds.length)
                {
                    i = 0;
                    preCache = false;
                }
                if (preCache)
                {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = imagedir + backgrounds[i];
                    cache.push(cacheImage);
                }
            }
        }
    });
})(jQuery);

This works great, but I'm trying to add a fade between image rotation.

Any pointers or clues as to how / where a fading element might be added to this script?

Many thanks Dave

Answer 1

Since you cannot animate background-image, you have to create a new element and place it behind the original, and after that fade out the old element.

DEMO jsfiddle

Since you have to duplicate the element, it will not work for body

/* Simple jQuery background image rotator plug-in by Dan 'Diplo' Booth */
(function($)
{
    $.fn.extend({
        bgrotate: function(options)
        {
            var defaults = {
                delay: 1000,
                images: [],
                imagedir: "/images/"
            }

            var o = $.extend(defaults, options);
            var $obj = $(this);
            var cache = [];
            var i = 0;
            var preCache = true;

            return this.each(function()
            {
                setTimeout(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
            });

            function setBack(elem, backgrounds, imagedir)
            {
                //elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                var newElement = elem.clone();
                $(newElement).css({'background-image': "url(" + imagedir + backgrounds[i] + ")"})
                $(newElement).css("position","absolute");
                $(newElement).css("top",$(elem).position().top + "px");
                $(newElement).css("left",$(elem).position().left + "px");
                $(newElement).hide();
                $(elem).prop("id", $(elem).prop("id") + "temp" + i);
                $(elem).after(newElement);
                $(newElement).fadeIn('slow', function() {
                    $(newElement).css("position",$(elem).css("position"));
                    $(newElement).css("top",$(elem).css("top"));
                    $(newElement).css("left",$(elem).css("left"));
                    $(elem).remove();
                    setTimeout(function() { setBack($(newElement), o.images, o.imagedir) }, o.delay);
                });
                i++;
                if (i == backgrounds.length)
                {
                    i = 0;
                    preCache = false;
                }
                if (preCache)
                {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = imagedir + backgrounds[i];
                    cache.push(cacheImage);
                }
            }
        }
    });
})(jQuery);