Javascript 多次调用jquery.slideUp时表现奇怪

编辑：如果我的标签被关闭会有帮助…没有改进

我试图构建的是相对简单的。一个类似老虎机的界面，滚动图像最终会减速并停止。我正在使用jQuery的.slideUp函数来实现这一点，它在应用于单个面板时运行良好。但是当应用到第二个或第三个时，动画开始表现出奇怪的行为

请尝试此演示以了解我的意思：

有人知道发生了什么吗？我用来模拟动画的技术非常简单，我只是把所有的图像都堆在另一个图像上，然后将最高的z索引替换为最低的z索引1，以便在幻灯片完成后将其放回堆栈的末尾

p、 我知道这是无限循环的，那部分还没有完成：

下面是html&js的重要代码，或者只需查看链接上的源代码即可

HTML

和JS

function testit(n){
    $(".panel."+n).each(function() {
        secondclass = $(this).attr('class').split(' ')[1]
        div = ("."+secondclass+" ul li")
        if(secondclass != "stats"){
            flip(div)
        }
    })
}
function flip(div){
    highest = gethighZ(div)[1]
    highest.slideUp(400,'linear',function(){
        lowestZ = getlowZ(div)[0]
        highest.css("z-index",lowestZ-1)
        highest.show()
        flip(div)
    })
}


//these 2 functions just return highest/lowest zindex divs
function gethighZ(div){
    var index = -999999999999
    var result = Array()
    $(div).each(function() {
        var current = parseInt($(this).css("zIndex"), 10)
        if(current > index) {
            result[0] = current
            result[1] = $(this)
            index = current
        }

    });
    return result
}

function getlowZ(div){
    var index = 99999999999999
    var result = Array()
    $(div).each(function() {
        var current = parseInt($(this).css("zIndex"), 10)
        if(current < index) {
            result[0] = current
            result[1] = $(this)
            index = current
        }

    });
    return result
}

---

在执行以下操作之前，请尝试停止所有动画：

highest.stop().slideUp(400,'linear',function(){
    lowestZ = getlowZ(div)[0]
    highest.css("z-index",lowestZ-1)
    highest.show()
    flip(div)
})

---

同样的事情…行为没有改变

highest.stop().slideUp(400,'linear',function(){
    lowestZ = getlowZ(div)[0]
    highest.css("z-index",lowestZ-1)
    highest.show()
    flip(div)
})