jQueryUI '블라인드'효과로 애니메이트하는 동안 페이지 플로우가 중단됩니다.

Question

일반적인 왼쪽에서 오른쪽으로 흐름이있는 div에서 각각 부트 스트랩 버튼으로 지정된 임의의 수의 링크가 있습니다.

<div id="btngrp"> 
    <a href="#" class="btn" id="btn_1">Troll 1</a> 
    <a href="#" class="btn" id="btn_2">Troll 2</a> 
    <a href="#" class="btn" id="btn_3">Troll 3</a> 
    <a href="#" class="btn" id="btn_4">Troll 4</a> 
    <a href="#" class="btn" id="btn_5">Troll 5</a> 
</div> 

jquery-UI's blind effect을 사용하여 첫 번째 버튼 제거! 애니메이션 단계에서 일시적인 '중단'을 흐름에 도입합니다.

$('#btn_1').toggle('blind', { direction: "horizontal" }, 4000) 

나는 맹인 효과가 inline없는 display 유형 일부 포장 요소를 도입 의심,하지만 난 그것을 해결하는 방법을 단서가 없다. http://jsfiddle.net/ajsyJ/

Answer 1

그래, 당신 말이 맞아 :

는 여기 jsFiddle 문제를 설명입니다 블록, 그리고 버튼의 나머지는 인라인 블록 : 그것은 디스플레이가 사업부를 추가합니다. 당신의 CSS이 추가보십시오 : http://jsfiddle.net/hHLAj/1/