javascript - 为什么 jQuery 幻灯片在选择时弹跳？

Question

这是我第一次尝试创建基于按钮的 slider 。

每张幻灯片分为两部分，左边是一张图片，右边是一些文字。切换幻灯片时，就在幻灯片加载之前出现意外反弹，我似乎无法理解为什么会发生这种情况。

有什么好的方法可以实现同一张幻灯片吗？

代码如下:

$( function() {
  imw_slider();
})

function imw_slider() {
    var button = $( '.slide-button' );
    button.click( function() {
    	button.css( 'background-color', '#fff' );
    	$(this).css( 'background-color', '#eee' );
        var index = $(this).index();
        var image = $(this).parent().prev();
	image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut( function() {
            image.children('.slide:nth-child('+(index+1)+')').fadeIn();
        });
    });
}

.image-box > .images {
    text-align: center;
}

.image-box > .images > .slide:nth-child(1) {
    display: block;
}

.image-box .slide.slide-2 {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
}

.image-box > .images > .slide {
    display: none;
}

.image-box > .images > .slide:after {
  display: block;
  content: '';
  clear: both;
}

.image-box .slide.slide-2 > div {
    width: 50%;
    float: left;
}

.image-box .buttons {
    display: table;
    margin: 0 auto;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.image-box .buttons .slide-button {
    display: table-cell;
    cursor: pointer;
    padding: 2px 10px;
    border-right: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="image-box my4">
    <div class="images">
        <div class="slide slide-2">
            <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
            <div>
                <div class="text">
                    <h2>This is the text for slide 1</h2></div>
            </div>
        </div>
        <div class="slide slide-2">
            <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
            <div>
                <div class="text">
                    <h2>This is the text for slide 2</h2></div>
            </div>
        </div>
        <div class="slide slide-2">
            <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
            <div>
                <div class="text">
                    <h2>This is the text for slide 3</h2></div>
            </div>
        </div>
    </div>
    <div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span></div>
</div>

Answer 1

不是淡出除了已经淡入的幻灯片之外的所有幻灯片，您可以先隐藏它们然后淡入当前使用此幻灯片:

image.children('.slide:not(:nth-child('+(index+1)+'))').hide();
image.children('.slide:nth-child('+(index+1)+')').fadeIn();

或者更好的是，您可以保存最后一张事件幻灯片并淡出并淡入当前幻灯片:

    if (prev_slide) {
      prev_slide.fadeOut(function() {
        prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
        prev_slide.fadeIn();
      });
    } else {
      prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
      prev_slide.fadeIn();
    }

请看下面的演示:

$(function() {
  imw_slider();
})
var prev_slide = null;

function imw_slider() {
  var button = $('.slide-button');
  button.click(function() {
    button.css('background-color', '#fff');
    $(this).css('background-color', '#eee');
    var index = $(this).index();
    var image = $(this).parent().prev();
    if (prev_slide) {
      prev_slide.fadeOut(function() {
        prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
        prev_slide.fadeIn();
      });
    } else {
      prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
      prev_slide.fadeIn();
    }
  });
}

.image-box > .images {
  text-align: center;
}
.image-box > .images > .slide:nth-child(1) {
  display: block;
}
.image-box .slide.slide-2 {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
}
.image-box > .images > .slide {
  display: none;
}
.image-box > .images > .slide:after {
  display: block;
  content: '';
  clear: both;
}
.image-box .slide.slide-2 > div {
  width: 50%;
  float: left;
}
.image-box .buttons {
  display: table;
  margin: 0 auto;
  margin-top: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.image-box .buttons .slide-button {
  display: table-cell;
  cursor: pointer;
  padding: 2px 10px;
  border-right: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="image-box my4">
  <div class="images">
    <div class="slide slide-2">
      <div>
        <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" />
      </div>
      <div>
        <div class="text">
          <h2>This is the text for slide 1</h2>
        </div>
      </div>
    </div>
    <div class="slide slide-2">
      <div>
        <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" />
      </div>
      <div>
        <div class="text">
          <h2>This is the text for slide 2</h2>
        </div>
      </div>
    </div>
    <div class="slide slide-2">
      <div>
        <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" />
      </div>
      <div>
        <div class="text">
          <h2>This is the text for slide 3</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span>
  </div>
</div>