Jquery 一个接一个的滑动图像

我有这个html：

<div class="postBack">
<img id="slideshow" class="1" height="550px" style="left: 0px; width: 2000px; position: relative; background-size: cover; overflow: hidden; padding: 0px; margin: 0px; float:left;" src="images/deskapple.png">
<img id="slideshow" class="2" height="550px" style="left: 2000px; width: 2000px; position: relative; background-size: cover; overflow: hidden; padding: 0px; margin: 0px;" src="images/less.png">
</div>

---

像这样使用动画回调

$("." + currentImage).stop().animate({left: "-2000px"}, 1000 , function() { 

        currentImage += 1;

        $("." + currentImage).stop().animate({left: "0px"}, 1000);
});

试试这个：

HTML:

---

如果可能，创建JSFIDLE，并提供演示。请刷新您的问题，我无法理解您到底想要什么。我希望两个IMG彼此相邻，就像这样：然后，当我将第一个设置为左侧动画（隐藏）时，我将第二个设置为可见动画。

$("." + currentImage).stop().animate({left: "-2000px"}, 1000 , function() { 

        currentImage += 1;

        $("." + currentImage).stop().animate({left: "0px"}, 1000);
});

<div class="postBack">
<img id="slideshow" class="1" height="550px" style="left: 0px; width: 2000px;
position: relative; background-size: cover; overflow: hidden; padding: 0px;
margin: 0px; float:left;" src="images/deskapple.png" >

<img id="slideshow" class="2" height="550px" style="left: 2000px; width: 2000px;
position: absolute; background-size: cover; overflow: hidden; padding: 0px; 
margin: 0px;" src="images/less.png">
</div>

var currentImage=1;

$("." + currentImage).animate({left: -2000 + "px"}, 1000);
    currentImage += 1;
    $("." + currentImage).animate({left: 0 + "px"}, 1000);