javascript - Jquery图像 slider 图像下降并淡出

Question

我在 Jquery 中创建了一个图像 slider ，当我单击前进或后退按钮移动图像时，必须更改的图像会下降，然后淡出。就像一个小波动。为什么会出现这种情况？ JSfiddle 链接 - https://jsfiddle.net/76xjmfjo/2/

<小时/>

HTML

<div class="container">
    <img class="back" src="http://placehold.it/50x20/000000"></img>

    <div class="slide-container">
        <div class="slide">
            <img src="http://placehold.it/940x350">
        </div>

        <div class="slide ">
            <img src="http://placehold.it/940x350">
        </div>

        <div class="slide">
            <img src="http://placehold.it/940x350">
        </div>

    </div>
    <img class="forward" src="http://placehold.it/50x20/000000"></img>
</div>

<小时/>

CSS

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 980px;
    margin:  0 auto;
}

.slide-container{
    position: relative;
    margin : 0 auto;
    width: 958px;
    height: 368px;

}
.slide{
    width: 940px;
    position: absolute;
    padding: 4px;
    border: 5px solid black ;
    z-index: 1;
}

.active{
    position: relative;
}

.back,.forward{
    top: 150px;
    position:absolute;
    z-index: 10000;
    cursor: pointer;

}

.forward{
    left: 950px;
}

<小时/>

jQUERY

$(document).ready(function () {

  var speed = 500;

  //showing the first image (adding class active)
  $('.slide').first().addClass('active');
  $('.slide').hide();
  $('.active').show();

  //assigning events for the forward and backward buttons
  $('.forward').on('click', function () {
    nextSlide();
  });
  $('.back').on('click', function () {
    prevSlide();
  });

  //next Slide function
  function nextSlide() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.oldActive').removeClass('oldActive');
      $('.slide').first().addClass('active');
    } 
    else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
  }

  //Previous slide function
  function prevSlide() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.oldActive').removeClass('oldActive');
      $('.slide').last().addClass('active');
    } 
    else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(500);
    $('.active').fadeIn(500);
  }

});

Answer 1

只需在 $('.slide') 的完整功能上淡入 $('.active') 即可；

$('.slide').fadeOut(speed, function(){
    $('.active').fadeIn(speed);
});