CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrap-3
Va1iant
Va1iant

Reputation: 223

JQueryUI button slide animation unwantedly expand layout

Take a look at this jsfiddle

I am trying to put two button side by side with one button is dynamic and only come out when there's certain event (in the example is the press of the other button). But during animation transition somehow the layout get distorted a bit

$('.btn-toggle').click(function(){
    $('.btn-del').toggle( "slide", {direction: "left" }, 500 );
})

Upvotes: 3

Views: 435

Answers (1)

Andrew Mcghie
Andrew Mcghie

Reputation: 153

Whats happening here is the jquery animation adds a placeholder to where the button will animate to. This is the element that is changing the position of the toggle button. If you set the speed of the animation really slow and look at the HTML code you will be able to see this.

Here is the css I did to hide the placeholder so this woudldnt happen

button.ui-effects-placeholder{
   display: none !important;
}

Upvotes: 2

Related Questions