Question

I’m using jQuery UI to animate an infobox. User clicks on an item, then an infobox pops up. It should slide out from the right and slide back when I want to hide it.

My code to show the infobox is as follows:

function ShowInfoBox() {
    var boxcontent = '<b>SOME HTML</b>';
    $("#infobox").html(boxcontent);

    $("#infoboxcontainer").show("slide", { direction: "right" }, 1300);
}

The #infoboxcontainer and the #infobox both have a CSS style of 100% width and height, so it fills up the parent item.

What happens is the following:

1. The item slides out, but it only has the smalles possible width/height (i.e. what the width/height would be if I didn’t manipulate it). You see a tiny box travelling all they way across the page before it settles in the topleft corner.
2. When the sliding animation is complete, the element suddenly snaps to its intended width/height (i.e. 100%).

I can’t seem to find a way to make the element slide after the width/height styles have properly been applied. I even tried setting timeouts etc but it seems it will always adjust the dimensions after revealing the item.

Anyone have an idea how to fix this?

Side note: when hiding the item afterwards, it does not snap back to a smaller version. Hiding works like it should.

Answer 1

Found the solution. Apparently, when you use .show('slide', 'down',500) the max width/heigt will be taken, then it will be animated. By using .slideUp(500); , the width/heigth is properly adjusted.

Solution: bug in jQuery UI 🙂