JQuery 图像滑块和 CSS 过渡只工作一次

Question

我正在尝试学习 jQuery 插件。我正在创建一个图像滑动插件。这就是我到目前为止的开发方式。

(function($){

        $.imageSlider = function(selector, settings) {

        //settings

        var config = {      
            'delay':2000,
            'speed':500
        };

        if(settings) {
            $.extend(config, settings);
        }

        //vars
        var obj = $(selector);

        obj.children('img').css('transition','width 2s, height 2s, transform 2s');      
        var image = obj.children('img');
        var count = image.length;

        var i = 0;

        image.eq(0).show(); //first image showing

        //begin the image loop

        setInterval ( function() {
                image.eq(i).fadeOut(config.speed);
                i = (i+1 == count) ? 0 : i+1;
                image.eq(i).fadeIn(config.speed);
                image.eq(i).css("transform","rotate(360deg)");
            }, config.delay
        );

        return this;
    }

})(jQuery);

但我的问题是轮换只发生一次循环。

JSFiddle http://jsfiddle.net/va45D/1/

按照我想要的方式加载所有 3 张图像后，它不会应用过渡。

请帮助我了解这里发生了什么。

Answer 1

喜山，

我可以重现你的问题，你是对的。第二次旋转图像后，它们将不再旋转。我正在使用 Firefox 25。

为了解决你的问题，我做了这些更新：

setInterval( function() {
        image.eq(i).fadeOut(config.speed);    
        image.eq(i).css("transform","rotate(0deg)");
        i = (i+1 == count) ? 0 : i+1;
        image.eq(i).fadeIn(config.speed);
        image.eq(i).css("transform","rotate(360deg)");
    }, config.delay
);

当你的循环结束时，元素在循环结束时保持相同的值，所以当你第一次运行它时，你的所有img元素都在0deg，最后你transform他们到360deg 位置。下次您运行循环时（这解释了您第二次遇到的问题），您的所有图像都从 360deg 开始。如果您将360deg 旋转到360deg，您将获得相同的位置，因为实际位置和新位置之间没有间隔。如果您将代码更新为 45deg，这将非常明显，正如您在 this fiddle 上看到的那样。

在开始该过程之前，我定义了一个将您的元素返回到 0 度的转换。也许这个解决方案可以解决您的问题。

Here is the JSFiddle

谢谢！