Пользовательский слайдер jQuery, повторяющий одно и то же изображение - без увеличения «i»

0

В настоящее время он повторяет те же изображения дважды перед переходом. Похоже, что он не увеличивается на "i". Как я могу исправить jQuery, чтобы он показывал только каждое изображение раз за раз?

Здесь скрипка: http://jsfiddle.net/9DU5M/

$(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);
                    });
                })();
            });
  • 0
    Не уверен, какое поведение анимации вы ожидаете, но вы сбрасываете положение фона во время анимации
  • 0
    Если вы посмотрите на скрипку, анимация правильная (фоновая позиция должна просто медленно двигаться вправо). Тем не менее, он должен увеличивать до следующего изображения, а не повторять один и тот же дважды каждый раз
Теги:

2 ответа

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 чтобы он работал в более браузерах.

Поделиться
  • 0
    Спасибо! Кажется, это не работает, когда я использую background-position. Это правильно -> 'background-position': '-50px 0px'?
  • 0
    @BrentonThornicroft: Это правильно, если вы используете его в css() , но вы не можете анимировать составные значения, такие как положение фона, без плагина.
Показать ещё 3 комментария
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+1) > 3) ? 1 : i + 1) + '-img');
                    doAnimation();
                });
            })();
        });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню