jquery ui 显示幻灯片 div

Question

我试图让一个链接“onclick”js 事件向左滑动特定的 div。如果按顺序从第一个链接到第三个链接，则以下 jsfiddle 有效。如果向后移动，则 div 不会滑动...我尝试重新 zindexing，因此要滑动的 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，而不是在动画完成时。您的代码有效，但幻灯片不可见，因为在动画结束之前活动层位于顶部。

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 before 动画开始并在 完成 时隐藏.

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/