Question

目前它在转换之前重复两次相同的图像。似乎它没有通过'i'递增。如何修复jQuery以便它一次只显示一个图像？

$(function () {
                var i = 1;
                (function doAnimation() {
                    $('.slide' + i + '-img').css({ 'background-position-x': '-50px', opacity: 1 }).animate({ 'background-position-x': '-5px' }, 5000, 'linear').animate({ 'background-position-x': '0px', opacity: 0 }, 500, 'linear', function () {
                        $(this).attr('class', 'slide' + (i = i == 3 ? 1 : i + 1) + '-img').css({ 'background-position-x': '-50px', opacity: 1 }).animate({ 'background-position-x': '-5px' }, 5000, 'linear').animate({ 'background-position-x': '0px', opacity: 0 }, 500, 'linear', doAnimation);
                    });
                })();
            });

Answer 1

当您更改为新图像时，您将显示该图像，然后在您再次显示之前将其淡出。只需淡入它并返回显示它：

$(function () {
    var i = 1;
    (function doAnimation() {
        $('.slide' + i + '-img').css({
            'background-position-x': '-50px',
            opacity: 1
        }).animate({
            'background-position-x': '-5px'
        }, 5000, 'linear').animate({
            'background-position-x': '0px',
            opacity: 0
        }, 500, 'linear', function () {
            $(this).attr('class', 'slide' + (i = i == 3 ? 1 : i + 1) + '-img').animate({
                'background-position-x': '0px',
                opacity: 1
            }, 500, 'linear', doAnimation);
        });
    })();
});

演示：http://jsfiddle.net/Guffa/9DU5M/1/

注意：我不确定您要对背景位置做什么。 background-position-x样式是非标准样式，仅存在于IE和Webkit浏览器（Safari）中。您需要使用background-position样式才能在更多浏览器中使用它。

Answer 2

你在循环中运行了两次动画.. 另外，上一个动画中的条件语句在检查时迟了..

我已经对此进行了测试，它可以根据您自己的小提琴顺利动画制作......

$(function () {
            var i = 1;
            (function doAnimation() {
                $('.slide' + i + '-img').css({
                    'background-position-x': '-50px',
                    opacity: 1
                }).animate({
                    'background-position-x': '-5px'
                }, 5000, 
                'linear')
                .animate({
                    'background-position-x': '0px',
                    opacity: 0 }
                , 500,
                'linear', function () {
                    $(this).attr('class', 'slide' + (i = ((i+1) > 3) ? 1 : i + 1) + '-img');
                    doAnimation();
                });
            })();
        });

自定义jQuery滑块重复相同的图像 - 不通过'i'递增

2 个答案: