Как исправить баг слайдера?

Question

[minaev007]

Вот этот шедевр - https://jsfiddle.net/bce8jaee/
при первом слайде, не важно сам или по нажатию, он странно бликует. При последующем перелистывании (на этом же первом слайде) такого глюка не наблюдается. Если листать назад - то же самое. Первый раз - криво, потом нормально. Как это исправить? Буду благодарен за разъяснения.

Answer 1

[tema_sun]

А почему бы не обойтись css анимацией?
Как-то так https://jsfiddle.net/bce8jaee/3/ ?

Так и перелистывать быстрее можно.

Comments

[minaev007]

крутяк)

[minaev007]

но вы не могли бы еще объяснить поведение исходного сдайдера при первом перелистывании?

[tema_sun]

minaev007, вам Анатолий правильно написал. Вы удаляли класс, не дождавшись окончания анимации.

[minaev007]

tema_sun, но ведь мы каждый раз удаляем класс curry раньше, чем выполнится fadeOut, а блик появляется только в первый раз...?

[tema_sun]

minaev007, когда вы первый раз перелистываете слайд, вы удаляете класс .curry и у элемента моментально остается только .img класс, а он в свою очередь display: none. Поэтому он сразу исчезает.

Однако при вызове .fadeIn()/.fadeOut() jquery добавляет inline стиль к элементу со свойствами display: block/none. Поэтому когда вы в следующий раз удаляете класс .curry, то у элемента все еще есть более специфичное инлайн свойство display: block, которое перекрывает это свойство из класса .img, поэтому элемент спокойно делает фэйд-аут/фэйд-ин.

Answer 2

[monochromer]

Анимацию лучше сделать с помощью css transition.
А так дело в специфичности стилей. Если и использовать jQuery для анимации нужно при инициализации задать инлайновые стили

<div class="slider">        
    <div class="img curry" style="display: block">1</div>
    <div class="img" style="display: none">2</div>
    <div class="img" style="display: none">3</div>
    <div class="img" style="display: none">4</div>
    <div class="img" style="display: none">5</div>
    <div class="img" style="display: none">6</div>    
</div>

Либо вставить костыль (не рекомендую)

.img[style],
.img.curry {
  display: block;
}

Answer 3

[Анатолий]

Вы удаляете .curry до того, как объект исчез (ну, или нет. сори - не очень шарю в jquery).
Решение: поставить удаление .curry в callback функции fadeOut, чтобы класс удалялся только после полного исчезновения.
Клик

P.S.: Но в этом случае быстро листать не получится :)

Comments

[minaev007]

Если быстро листать слайдер сходит с ума) и тем не менее проблема решена. Только я все равно не пойму. Когда мы листаем второй раз (и все последующие разы) мы тоже удаляем класс curry раньше чем закончится fadeOut, но глюка то больше нет. Можете растолковать?