jQuery animate element and hide

Question

I'm building Windows 8 app in JavaScript. What I'm trying to do is to slide the html element out of the screen and then change its "display" property to "none":

var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
    panelContainer.hide();
});

But this code doesn't work correctly: it just immediately hides the element without animation. I've also tried:

var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
    panelContainer.hide(200);
});

and it works, but it's a hack: I don't want to change the opacity when animating and I don't need to have additional timeout for hiding. I've found that jQuery UI library has extended show and hide methods that do that, but I would like not to reference this library just for one call. I'm aware that there is a WinJS.UI.Flyout that performs similar operation, but it's not applicable in my case. Any ideas how this can be done?

Answer 1

The problem was that jQuery does not put hide animation into its animation queue by default. That's why my initial code was hiding the html element first and then animating it. The solution for that is to call hide with the parameter that explicitly specifies that hide call should be queued:

panelContainer.hide({queue: true});