0

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/

1 Answer 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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.