将过渡应用于预加载的图像

Question

我正在使用jQuery插件Images-rotation来创建悬停在图片上时播放的幻灯片。我想在图像之间添加过渡，例如jQuery的fadeIn。图像是预先加载的，这就是为什么我认为到目前为止我所尝试的并没有成功。

我还创建了这个（http://jsfiddle.net/Lydmn2xn/），希望能够轻松地显示正在使用的内容，尽管所有代码都可以在Javascript插件中找到。到目前为止，我已经尝试添加$ this.fadeIn行的变体（＆＃34; slow＆＃34;）;在各个地方没有运气。以下是Javascript插件的代码，其中包含我尝试进行的更改。不知道如何指出它们，因为我不能在代码中加粗文本。 （注意：所说的变化不在Jfiddle中，因为它们不会产生任何变化）。

$.fn.imagesRotation = function (options) {
var defaults = {
        images: [],         // urls to images
        dataAttr: 'images', // html5 data- attribute which contains an array with urls to images
        imgSelector: 'img', // element to change
        interval: 1500,     // ms
        intervalFirst: 1500, // first image change, ms
        callback: null      // first argument would be the current image url
    },
    settings = $.extend({}, defaults, options);

var clearRotationInterval = function ($el) {
        clearInterval($el.data('imagesRotaionTimeout'));
        $el.removeData('imagesRotaionTimeout');
        clearInterval($el.data('imagesRotaionInterval'));
        $el.removeData('imagesRotaionInterval');
    },
    getImagesArray = function ($this) {
        var images = settings.images.length ? settings.images : $this.data(settings.dataAttr);
        return $.isArray(images) ? images : false;
    },
    preload = function (arr) {  // images preloader
        $(arr).each(function () {
            $('<img/>')[0].src = this;
$this.fadeIn("slow");
        });
    },
    init = function () {
        var imagesToPreload = [];
        this.each(function () {  // preload next image
            var images = getImagesArray($(this));
            if (images && images.length > 1) {
                imagesToPreload.push(images[1]);
            }
        });
        preload(imagesToPreload);
    };

init.call(this);

this.on('mouseenter.imagesRotation', function () {
    var $this = $(this),
        $img = settings.imgSelector ? $(settings.imgSelector, $this) : null,
        images = getImagesArray($this),
        imagesLength = images ? images.length : null,
        changeImg = function () {
            var prevIndex = $this.data('imagesRotationIndex') || 0,
                index = (prevIndex + 1 < imagesLength) ? prevIndex + 1 : 0,
                nextIndex = (index + 1 < imagesLength) ? index + 1 : 0;
            $this.data('imagesRotationIndex', index);
            if ($img && $img.length > 0) {
                if ($img.is('img')) {
                    $img.attr('src', images[index]);
                    $this.fadeIn('slow');
                }
                else {
                    $img.css('background-image', 'url(' + images[index] + ')');
                    $img.fadeIn('slow');
                }
            }
            if (settings.callback) {
                settings.callback(images[index]);
            }
            preload([images[nextIndex]]); // preload next image
        };
    if (imagesLength) {
        clearRotationInterval($this); // in case of dummy intervals
        var timeout = setTimeout(function () {
            changeImg();
            var interval = setInterval(changeImg, settings.interval);
            $this.data('imagesRotaionInterval', interval); // store to clear interval on mouseleave
        }, settings.intervalFirst);
        $this.data('imagesRotaionTimeout', timeout);
    }
}).on('mouseleave.imagesRotation', function () {
    clearRotationInterval($(this));
}).on('imagesRotationRemove', function () {
    var $this = $(this);
    $this.off('.imagesRotation');
    clearRotationInterval($this);
});
};

$.fn.imagesRotationRemove = function () {
this.trigger('imagesRotationRemove');
};

如果它在正确的位置，或者fadeIn / Out不适用于预加载的图像，那会不会有效？任何帮助或提示表示赞赏。

感谢。