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它们transform为360deg位置。 下次运行循环时（这解释了第二次出现的问题），所有图像都以360deg 。 如果将360deg 360deg旋转到360deg ，则位置相同，因为实际位置与新位置之间没有间隔。 如果您将代码更新为45deg ，这可以非常明显，正如您在此小提琴上看到的那样。

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

这是JSFiddle

谢谢！