jquery .slideUp ведет себя странно, когда вызывается более одного раза - PullRequest
Новая
       10

jquery .slideUp ведет себя странно, когда вызывается более одного раза

1 голос
/ 18 января 2012

РЕДАКТИРОВАТЬ: поможет, если мои теги были закрыты ... увы, без улучшения.

То, что я пытаюсь построить, относительно просто. Интерфейс, похожий на игровой автомат, с «вращающимися» изображениями, которые в конечном итоге будут замедляться и останавливаться. Для этого я использую функцию .slideUp () в jQuery, и она хорошо работает применительно к одной панели. Но при применении ко второй или третьей анимация начинает действовать странно.

Попробуйте эту демонстрацию, чтобы понять, что я имею в виду: http://bit.ly/wtiq36

Кто-нибудь знает, что происходит? Техника, которую я использую для симуляции анимации, довольно проста, я просто складываю все изображения в другое и меняю самый высокий z-индекс на самый низкий z-index-1, чтобы один раз вернуть его в конец стека слайд () закончен.

(p.s. Я знаю, что это циклы бесконечно, эта часть еще не закончена:))

Вот важный код (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
}

1 Ответ

0 голосов
/ 18 января 2012

Попробуйте остановить все анимации до: 

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