jquery ui show slide divs

Question

我试图找到一个链接＆＃34; onclick＆＃34;滑动特定div的js事件。如果按顺序从第一个链接到第三个链接，则以下jsfiddle有效。如果倒退，div不会滑动...我尝试重新索引，所以滑动的div位于当前可见的div之上，但这似乎不起作用。

http://jsfiddle.net/3qvro2pq/5/

function doShow(inDiv){
    $(inDiv).zIndex(1);
    $(inDiv).show({
    effect:'slide',
    direction:'right',
    duration:1000,
    complete:closeHidden
});
}

请帮忙。

Answer 1

您需要在动画开始时隐藏其他div，而不是在完成时隐藏其他div。您的代码有效，但幻灯片不可见，因为活动图层位于顶部，直到动画完成。

var curWindow;
function doShow(inDiv){
    curWindow = inDiv;
    $(inDiv).zIndex(1);
    closeHidden();
    $(inDiv).show({
        effect:'slide',
        direction:'right',
        duration:1000
    });
}
function closeHidden(){
    $(".frameDiv").each(function(i){
        if ("#" + this.id !== curWindow){
            $("#" + this.id).hide();
            $("#" + this.id).zIndex(99);
        }
    });
}

此处有效：http://jsfiddle.net/3qvro2pq/7/

编辑：如果要在动画结束前显示div，请在动画开始之前设置zIndex 并隐藏完成

EDIT2：这有效。

var curWindow;
function doShow(inDiv){
    curWindow = inDiv;
    $('.frameDiv').zIndex(1);
    $(inDiv).zIndex(10);
    $(inDiv).show({
        effect:'slide',
        direction:'right',
        duration:1000,
        complete: closeHidden
    });
}
function closeHidden(){
    $(".frameDiv").each(function(i){
        if ("#" + this.id !== curWindow){
            $("#" + this.id).hide();
        }
    });
}

JSFiddle：http://jsfiddle.net/3qvro2pq/9/