Question

我有这个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>

图像位于左侧0px，另一个图像位于左侧2000px之后，现在我将第一个类1动画到左侧-2000px，并从左侧动画类2到0px。 - 但是2级不可见。

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

Answer 1

像这样使用动画回调。

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

        currentImage += 1;

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

Answer 2

试试这个：

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: absolute; background-size: cover; overflow: hidden; padding: 0px; 
margin: 0px;" src="images/less.png">
</div>

jQuery的：

var currentImage=1;

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

Demo

一个接一个地滑动图像

2 个答案: