jquery ui show 슬라이드 div

Question

특정 div를 왼쪽으로 슬라이드하는 링크 "onclick"js 이벤트가 있습니다. 다음 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를 표시 할 경우, 전에 애니메이션 시작을 Z- 색인 을 설정하고 완전한에 숨 깁니다.

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/