jQuery слайдер не переходит гладкий

Question

Благодаря Christiaan Scheermeijer я получил правильность перехода ползунка. Но теперь кажется, что фокус изображений отключен. Нужно ли использовать z-index или что-то, чтобы слайды могли нормально сглаживаться? В настоящее время единственное, что «исчезает», как должно, - это слайд 4, переход обратно в слайд 1. Я действительно озадачен. Я пробовал синхронизацию по замиранию, что, похоже, не является проблемой. Кажется, что «следующий слайд» просто появляется на переднем плане над слайдом, от которого он должен исчезать.

http://jsfiddle.net/WASasquatch/haBAS/2/

$('#hi1').fadeTo("slow", 1.0); 
var slide = 0, 
slides = 4, 
ids = [ 
    '#hi1', 
    '#hi2', 
    '#hi3', 
    '#hi4', ]; 
slideShow = setInterval(function() { 
    var nextSlide = slide + 1; 
    if (nextSlide > slides - 1) { 
     nextSlide = 0; 
    } 
    $(ids[nextSlide]).fadeTo(100, 1.0); 
    $(ids[slide]).fadeTo(1200, 0); 
    slide++; 
    if (slide > slides - 1) { 
     slide = 0; 
    } 
}, 5000); 

Answer 1

Пожалуйста, попробуйте это.

Изменение:

$(ids[nextSlide]).fadeTo(100, 1.0); 
$(ids[slide]).fadeTo(1200, 0); 

To:

$(ids[slide]).fadeTo(300, 0); 
$(ids[nextSlide]).fadeTo(2300, 1.0); 

И добавить к правилу #container CSS:

background-color: #000; 

Кроме того, вы могли бы рассмотреть эти изменения тоже (хотя это не обязательно для его работы - это упростит ваш код).

Изменение:

slide++; 
if (slide > slides - 1) { 
    slide = 0; 
} 

To:

slide = nextSlide; 

(Вы уже подсчитали, что следующий слайд будет, вы можете просто использовать его вместо перерасчета, а затем проверять границы.)

Еще одно предложение - рассмотреть возможность использования ids.length, где у вас есть slides, и удалите slidesvar - причина в том, что это может иметь смысл в том случае, если вы решите добавить или удалить слайды в будущем, вам не обязательно помнить, что нужно также обновить счет slides - он будет работать только с тем количеством, которое вы указали в ids массив.

Рассмотрите этот JSFiddle.