형제가 jqueryui 슬라이드 여기

Question

에 숨어없는 것은 함수의 빠르게 연속해서 두 개의 버튼을 클릭하십시오.

HTML은 : 나는 두 개의 버튼을 클릭하면

<div class="col-md-2"> 
    <div class="popoutlink" data-box="p1">1</div> 
    <div class="popoutlink" data-box="p2">2</div> 
    <div class="popoutlink" data-box="p3">3</div> 
    <div class="popoutlink" data-box="p4">4</div> 
    <div class="popoutlink" data-box="p5">5</div> 
</div> 

<div class="col-md-10 bb" style="height: 400px;"> 
    <div class="popout" id="p1"><h1>panel 1</h1></div> 
    <div class="popout" id="p2"> 
     <h1>panel 2</h1> 
    </div> 

빠르게 두 개의 창을 화면에 남아 있습니다. 선택한 div가 나타나기 전에 형제가 숨길 바란다. 내가 promise.done()를 사용하여 시도

: 없음 효과에

box.siblings().hide(200).promise().done(function(){ 
    box.toggle("slide", { direction: "left" }, 500); 
}); 

. 콜백으로 hide에 box.toggle 추가 :

box.siblings().hide(200, function(){ 
    box.toggle("slide", { direction: "left" }, 500); 
}); 

는 매우 재미 있지만 유용하지 않았다.

단추를 얼마나 빨리 누르더라도 선택한 div를 표시하기 전에 형제가 안정적으로 사라지게하려면 어떻게해야합니까?

당신 see it here 그냥 번호 상자를 클릭 빠르게

감사

Answer 1

나는 당신의 질문을 이해한다면,이 도움이 될 것입니다

$(function() { 
    $('.popoutlink').on('click', function() { 
    var box = $('#' + $(this).data('box')); 
    $(".popout").hide(); 
    //box.siblings().hide(); 
    box.toggle("slide", { 
     direction: "left" 
    }, 500); 
    //box.siblings().hide(); 
    }); 
}); 

https://jsfiddle.net/Twisty/3mbh5p0r/

jQuery를 UI를

"링크"중 하나를 클릭하면 모두 숨겨지고 클릭 한 사람 만 토글됩니다.

---

업데이트 .css("display", "none") 대 .hide()의 조금 더 테스트는 CSS를 변경하는 빠른 방법이라고 밝혔다. 이 페이지는 그것이 즉각 인 방법에 대해 이야기합니다. 그러나 나는 그것이 빠르지 않았 음을 알았습니다.

일치하는 요소는 애니메이션없이 즉시 숨겨집니다. 표시 속성 값이 jQuery의 데이터 캐시에 저장되어 나중에 표시가 초기 값으로 복원 될 수 있다는 점을 제외하고는 .css ("display", "none")을 호출하는 것과 대략 같습니다. 요소의 표시 값이 인라인이고 비어 있으면 표시된인라인으로 다시 표시됩니다.

그리고 :

참고.hide()가 즉시 실행되고 지속 시간 또는 0의 지속 시간이 지정되지 않으면 애니메이션 대기열을 무시합니다.

콜백을 사용해 보았는데, 악화되었습니다. 숨기기 애니메이션이 완료되면 콜백이 트리거되어야하지만 숨기기 조작을 애니메이션화하는 요소가 추가됩니다. 속도가 0 일 때조차도 느려졌습니다.

그래서 나는이 조언 :

$(function() { 
    $('.popoutlink').on('click', function() { 
    $(".popout").css("display", "none"); 
    $('#' + $(this).data('box')).show("fast"); 
    }); 
});