Слайдер jQuery: эффект fadeIn / fadeOut не работает на первом слайде

Question

Слайдер jQuery: эффект fadeIn / fadeOut не работает на первом слайде

У меня есть простое слайд-шоу изображений, и я использую jQuery для постепенного исчезновения одного и другого, но эффекты работают только после первого раза.

JQuery:

    setInterval(function() {
jQuery('#slider > div:nth-child(2)')
.fadeOut()
.next()
.fadeIn()
.end()
.prependTo('#slider');

jQuery('#slider > div:nth-child(1)')
.fadeOut()
.next()
.fadeIn()
.end()
.prependTo('#slider');

},  5000);

CSS:

#slider > div:nth-child(1){
display:none;
}

1

css html jquery php slideshow

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я думаю, что это связано с твоим предлогом и сокрытием первого элемента. Попробуйте это вместо этого (комментарии в коде объясняют, что происходит):

setInterval(function() {

// get first and second slides:
var slide = jQuery('#slider > div:nth-child(1)'),
nextSlide = slide.next();

// fadeOut the first slide
slide.fadeOut('slow', function () {
// when animation is finished fade in second slide and move first slide to second place ready for animation to repeat in reverse
nextSlide.fadeIn('slow').after(slide);
});

}, 5000);

#slider {
position: relative;
}

#slider > div:nth-child(2) {
display: none;  // always hide 2nd slide
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<div>Test</div>
<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
</div>

2

Другие решения

Других решений пока нет …

Источник