Search code examples
htmlcsstwitter-bootstrapjquery-uilayout

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/

Solution

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