两个 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 和 slides 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>