В настоящее время он повторяет те же изображения дважды перед переходом. Похоже, что он не увеличивается на "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);
});
})();
});
Когда вы изменили свое новое изображение, вы показываете его, а затем исчезаете, прежде чем вернуться к показу. Просто угасните его и верните, показывая его:
$(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
чтобы он работал в более браузерах.
css()
, но вы не можете анимировать составные значения, такие как положение фона, без плагина.
Вы дважды запустили анимацию внутри своего цикла. Также, ваш оператор состояния в последней анимации опоздал с проверкой.
Я тестировал это, и он анимирует плавно, как хотелось бы, в вашей собственной скрипке...
$(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();
});
})();
});