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

Question

编辑:如果我的标签被关闭会有帮助...没有改进唉。

我想要构建的内容相对简单。类似老虎机的界面，带有“滚动”图像，最终会减慢速度并停止。我使用 jQuery 的 .slideUp() 函数来执行此操作，并且在应用于单个面板时效果很好。但当应用于第二个或第三个时，动画开始表现得很奇怪。

试试这个演示看看我的意思:http://bit.ly/wtiq36

有人知道这是怎么回事吗？我用来模拟动画的技术非常简单，我只是将所有图像堆叠到另一个上，然后将最高的 z-index 交换为最低的 z-index-1，将其放回堆栈的末尾一次SlideUp() 已完成。

(附:我知道这个无限循环，那部分还没有完成:))

这是重要的代码(html 和 js)，或者只需检查该链接上的源代码即可了解所有内容。

HTML

<div class="panel one">
        <ul>
            <li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
            <li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
            <li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
        </ul>
    </div>

    <div class="panel two">
        <ul>
            <li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
            <li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
            <li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
        </ul>
    </div>

    <div class="panel three">
        <ul>
            <li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
            <li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
            <li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
        </ul>
    </div>

还有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
}

Answer 1

尝试停止之前的所有动画:

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