javascript - 动画同时上滑和下滑

Question

HTML

<div id="slider">
        <a href="#"><img src="http://www.alleywatch.com/wp-content/uploads/2013/04/brand.jpeg" id="image1" /></a>
        <a href="#"><img src="http://www.ereleases.com/prfuel/wp-content/uploads/2012/07/brand_stamp.jpg" id="image2" /></a>
        <a href="#"><img src="http://www.submitedge.com/blog/wp-content/uploads/2013/04/Creating-a-Positive-Brand-Image.jpg" id="image3" /></a>
    </div>
    <div id="slider-back"></div>

CSS

#slider {
    height:296px;
    overflow:hidden;
    width:822px;
    position:absolute;
    left:50%;
    margin-left:-411px;
    top:87px;
    z-index:20;
}
#slider-back {
    position:absolute;
    left:50%;
    margin-left:-411px;
    height:296px;
    z-index:29;
    top:87px;
    width:822px;
    background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent;

jQuery

$(document).ready(function () {

    var imgs = $('#slider > a > img');
    var z = 1;
    var previousImageId = "";

    $(imgs[0]).show();

    function loop(ev) {
        imgs.delay(5000).slideUp('slow').eq(z).slideDown(500, function () {
            check = z != imgs.length - 1 ? z++ : z = 0;

            loop();
        });
    }
    loop();
});

我试过小提琴

http://jsfiddle.net/ee9R6/

我想像这样输出

http://www.lulupu.com/（右侧我们制造的模块垂直滑块）

Answer 1

我会走一条稍微不同的路线

http://jsfiddle.net/ee9R6/4/

无需将所有元素向上滑动（最终将幻灯片向下排队），您可以向上滑动当前 img 并同时向下滑动下一张图像。

function loop(ev) {
         $(imgs[z]).slideUp("slow");
         check = z != imgs.length - 1 ? z++ : z = 0;         
         $(imgs[z]).slideDown("slow");
         setTimeout(loop, 5000);         
     }