动画同时滑动和向下滑动

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();
});

I tried in fiddle

http://jsfiddle.net/ee9R6/

I want to output like

http://www.lulupu.com/ (Right side our manufactures modlue vertical slider)

Answer 1

I would go a slightly different route

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

Instead of sliding all of the elements up, which ends up queuing the slide down, you can slide up the current img and slide down the next image at the same time.

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