jQueryUI 'Blind‘效果在动画中引入页面流中断

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类型的包装元素，但我不知道如何修复它。

下面是一个说明这个问题的jsFiddle：http://jsfiddle.net/ajsyJ/

Answer 1

是的，你是对的:它添加了一个带有display: block的div，其余的按钮都是内联block。尝试将此代码添加到您的CSS：

#btngrp .ui-effects-wrapper { display: inline-block; }

以下是更新后的小提琴：http://jsfiddle.net/hHLAj/1/