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

时间:2013-03-13 19:13:58

标签: css html5 jquery-ui twitter-bootstrap flow

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

1 个答案:

答案 0 :(得分:1)

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

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

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