'jQueryUI 'Blind' effect introduces break in page flow while animating

I have an arbitrary number of links, each styled as a bootstrap button, in a div with ordinary left to right flow.

<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>

Removing the first buttons using jquery-UI's blind effect! will introduce a temporary 'break' in the flow during the animation phase.

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

I suspect the blind effect introduces some wrapping element with a display type that is not inline, but I have no clue how to fix it.

Here is a jsFiddle illustrating the problem: http://jsfiddle.net/ajsyJ/

htmlcsstwitter-bootstrapjquery-uilayout


Solution 1:[1]

Yep, you're right: it adds a div which has display: block, and the rest of the buttons are inline-block. Try adding this to your CSS:

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

Here's the updated fiddle: http://jsfiddle.net/hHLAj/1/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 frostyterrier

Related Questions