jquery ui로 요소에서 슬라이드하는 방법

Question

콘텐츠를 슬라이드 아웃하기 위해 스 와이프 이벤트 (및 http://api.jqueryui.com/slide-effect/)를 사용하고 있습니다. 이것은 잘 작동합니다. 그러나 이전 형제가 밖으로 슬라이드로 다음 ('div')에서 슬라이드해야합니다. next(), nextAll(), closest()를 시도했지만 아무 것도 필요없는 것 같습니다. 여기

는 HTML이

<div id="content2" class="content tabcontent active" data-content="1"> 
<div id="orders_today" class="datagroup datagroup0"></div> 
<div id="orders_last_30_days" class="datagroup datagroup1 hide"> 
</div> 

과 같은

function swipeleftHandler(event){ 
    $(this).toggle("slide");// div slides out to left 

    // need to slide in next one here 

} 

가 슬쩍 이벤트가 슬쩍 이벤트가 올바르게 캡처되고이

$(document.body).on('swipeleft', '.datagroup' ,swipeleftHandler); 

처럼 호출되는 함수이며, 첫 번째 div는 필요에 따라 왼쪽으로 미끄러 져 있습니다. . 나는 같은 클래스 (알 수없는 ID의)와 컨테이너에 여러 요소가있을 수 있습니다에서 좌우로 다음 DIV가 필요합니다, 그래서 다음이 숨어 전에 다음()

Answer 1

캐시를 사용하여 시도하는 이유는 다음과 같습니다

을

$("body").on("click", "div", function(){ 
    $next = $(this).next(); 
    $(this).toggle("slide"); 
    $next.toggle("slide"); 
}); 

jsFiddle

Answer 2

나는이에 발견 해결책은 숨기기 클래스에게

세트를 제거

1. 이다 높이 컨테이너 (# content2)는 뷰포트 높이에 비례하여 동적으로 배치됩니다.
2. #의 content2 {오버 플로우 : 숨겨진}

는 내 swiftlefthandler 기능에, 나는 당신이 당신의 HTML 마크 업을 보여 주 시겠어요 다음

$(this).toggle("slide"); 
$(this).next().toggle("slide");