jquery ui显示幻灯片div

Question

我正在尝试一个链接"onclick"js事件，该事件向左滑动一个特定的div。如果按顺序从第一个链接到第三个链接，下面的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，而不是在动画完成时。您的代码可以工作，但幻灯片不可见，因为在动画完成之前，活动层一直在顶部。

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，并在完成时隐藏。

第2版：这很有效。

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/