jQueryUI 'Blind' 效果在动画时引入了页面流中断答案

【问题标题】：jQueryUI 'Blind' effect introduces break in page flow while animatingjQueryUI 'Blind' 效果在动画时引入了页面流中断
【发布时间】：2013-03-01 22:12:35
【问题描述】：

我有任意数量的链接，每个都被设计为一个引导按钮，在一个普通的从左到右流的 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)

我怀疑盲效应引入了一些 display 类型的包装元素，而不是 inline，但我不知道如何解决它。

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

【问题讨论】：

标签： css html jquery-ui twitter-bootstrap flow

【解决方案1】：

是的，你是对的：它添加了一个具有 display: 块的 div，其余按钮是 inline-block。尝试将其添加到您的 CSS：

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

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

【讨论】：

我喜欢事情有简单的解决方案:)