javascript - 两个 div 同时设置动画

Question

我正在尝试在网页上创建一个简单的幻灯片放映类型的功能。我已经创建了幻灯片放映，但在用户按下“下一张幻灯片”按钮时将下一张幻灯片顺利过渡到框架时遇到问题。这是我的代码

var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
$('.slide').eq(currentslide).addClass('show');

$('.btnslideshow.right').click(function(){
  var left = $('.slide.show').offset().left;
	$('.slide.show').animate({'left': '+=' + sswidth + 'px'}, 'slow', function(){
  		$('.slide').eq(currentslide).removeClass('show');
      $('.slide').eq(currentslide).css({left: '0px'});
  		currentslide+=1;
      if (currentslide > $('.slide').length-1) currentslide = 0;
      $('.slide').eq(currentslide).addClass('show', 'slow');
  });
});

.background {
  background-color: lightgray;
  border-color: gray;
  border-style: solid;
  border-width: 1px 0 1px 0;
  width: 100%;
}
.btnslideshow {
  background: lightgray;
  height: 25px;
  position: relative;
  top: 77.5px;
  width: 25px;
  box-sizing: border-box;
  border-style:inset;
  z-index: 1;
}
.btnslideshow:hover {
  background: lightblue;
  border-style:outset;
}
  .btnslideshow.left {
    float: left;
    left: 7%;
    transform: rotate(180deg);
  }
  .btnslideshow.right {
    float:right;
    right: 7%;
  }
#nav {
  height: 25px;
  text-align: right;
}
.navHeader {
  border: none; 
  background-color: transparent;
  display: inline;
  font-size: 13px;
  font-variant: small-caps;
  font-weight: 600;
  padding-right: 20px;
}
.navHeader:nth-child(1) {
  margin-right:10px;
}
.navHeader:hover {
  font-size: 16px;
}
.show {
  display:inline-block !important;
}
#slideshow {
  background-color: white;
  border: 1px solid black;
  height:200px;
  margin-left: 12.5%;
  overflow:hidden;
  width:75%;
}
.slide {
  border:1px solid black;
  display: none;
  height:100%;
  position:relative;
  width:0px;
  z-index: 0;
}
.slide.show {
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div class="navone">
    <button class="navHeader">
     About
    </button>
    <button class="navHeader">
     Contact
    </button>
  </div>
</div>
<div id="container">
  <div class="background">
    <img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
    <img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
    <div id="slideshow">
      <div class="slide">
        Test slide
      </div>
      <div class="slide">
        Test slide 22222
      </div>
    </div>
  </div>
</div>

如您所见，我的幻灯片基本上可以正常工作，但过渡非常粗糙。我想要的是第二张幻灯片移入框架，而第一张幻灯片移出，它们之间没有空间。我已经尝试在第一个动画的回调函数内部、第一个动画外部以及其他东西中为第二张幻灯片的宽度设置动画，但我似乎无法理解。

Answer 1

我对你的代码做了很多修改。

我制作了 #slideshow div position:relative 和 slide 的 position:abosulte。然后在js结构上做了一些改动，在animate函数中引入了queue:false等

var $slideshow = $('#slideshow');
var sswidth = $slideshow.width();
var ssheight = $slideshow.height();
var currentslide = 0;
var duration = 1000;
$('.slide').eq(currentslide).addClass('show');
$('.slide').not('.show').css('left', -(sswidth+3) + 'px');
$('.btnslideshow.right').click(function() {
    var left = $('.slide.show').offset().left;
    $('.slide.show').animate({
        'left': sswidth + 'px'
    }, {
        duration: duration,
        queue: false,
        complete:function(){
          $(this).delay(20).css('left', -(sswidth+3) + 'px').removeClass('show');
        }
    });
    currentslide++;
    if (currentslide > $('.slide').length - 1) currentslide = 0;
    $('.slide').eq(currentslide).animate({
        left: '0px'
    }, {
        duration: duration,
        queue: false
    }).delay(duration).addClass('show');
});

.background {
  background-color: lightgray;
  border-color: gray;
  border-style: solid;
  border-width: 1px 0 1px 0;
  width: 100%;
}
.btnslideshow {
  background: lightgray;
  height: 25px;
  position: relative;
  top: 77.5px;
  width: 25px;
  box-sizing: border-box;
  border-style: inset;
  z-index: 1;
}
.btnslideshow:hover {
  background: lightblue;
  border-style: outset;
}
.btnslideshow.left {
  float: left;
  left: 7%;
  transform: rotate(180deg);
}
.btnslideshow.right {
  float: right;
  right: 7%;
}
#nav {
  height: 25px;
  text-align: right;
}
.navHeader {
  border: none;
  background-color: transparent;
  display: inline;
  font-size: 13px;
  font-variant: small-caps;
  font-weight: 600;
  padding-right: 20px;
}
.navHeader:nth-child(1) {
  margin-right: 10px;
}
.navHeader:hover {
  font-size: 16px;
}
.show {
  display: inline-block !important;
}
#slideshow {
  background-color: white;
  border: 1px solid black;
  height: 200px;
  margin-left: 12.5%;
  overflow: hidden;
  width: 75%;
  position:relative;
}
.slide {
  border: 1px solid black;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
  display:none;
}
.slide.show {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div class="navone">
    <button class="navHeader">
      About
    </button>
    <button class="navHeader">
      Contact
    </button>
  </div>
</div>
<div id="container">
  <div class="background">
    <img class="btnslideshow left" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
    <img class="btnslideshow right" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_22-512.png">
    <div id="slideshow">
      <div class="slide">Test slide</div>
      <div class="slide">Test slide 22222</div>
    </div>
  </div>
</div>