why does my jquery animation not function properly in chrome when using browser confirms and alerts?

I'm seeing an issue regarding some jquery animation in chrome. I'm wondering if anyone else has seen this.

I'm just trying to do some simple slide up to hide a div, or hide and then fade a div in. The slide up animation on the div is not happening in chrome and the hide is lagging before the fade in kicks in; whereas in firefox the animation is immediate and smooth.

The thing is that I have a browser confirm wrapped around this stuff to only do this animation if the user confirms. If I remove the confirms, the animation works fine in chrome.

Is that weird?

Here's an example. With the confirm I get no slide up. Without the confirm I get one. That is, simply removing the if(confirm){} code block.

   if (confirm('Are you sure you want to remove the item?')) {
        dragbox.slideUp('fast', function () {
            dragbox.remove();
            WebService.RemoveItem(itemId,
            //on success
                function () {
                    if ($('.dragbox').length == 0) {
                        //remove columns
                        $('.column').remove();
                    }
                },
            //on fail
                function () {
                    alert('Failed to remove the "' + itemName + '" item.');
                }
            );
        });
    }

In this example, with the confirm there's a lag after the div is hidden and before the fade in start so that the div is hidden longer than I would like. Without the confirm, ti behaves as I would expect.

        if (confirm('Are you sure?')) {
            $('#' + itemId).spin();
            WebService.AddItem(itemId,
            //onsuccess
                function (r) {
                    var item = $('#' + itemId); //this is a div
                    item.unspin();

                    item
                        .hide()
                        .toggleClass('item-added')
                        .fadeIn('fast', function () {
                            // Create the DOM elements
                            $('<p><img class="item-added" src="images/item-added.png" />')
                            // Sets the style of the elements to "display:none"
                            .h开发者_StackOverflow中文版ide()
                                // Appends the hidden elements to the "posts" element
                            .appendTo($('.contentInfo', item))
                                // Fades the new content into view
                            .fadeIn('fast');
                        });

                },
            //onfail
                function () {
                    $('#' + itemId).unspin();
                    alert('Failed');
                }
            );
        }

Can anyone confirm or disprove this notion based on my speculation and example? What are some alternatives to the browser confirm?

EDIT: Yeah I'm not sure what's going on.

Are you using the newest version of jQuery UI? Have you got the jQuery UI stylesheet also? It all looks fine. If you can't find an answer here, open up a bug report.

Updating Chrome fixes this. I'm now running version 15.0.874.120 and all is well. My word.

I was just experiencing the same thing with some code that worked when it was written a couple of years ago. Now it has an issues in webkit-based browsers.

I had several animations that were paused by using confirm() calls and the subsequent animations failed to display properly. I finally figured out that if I put a short delay before the animation, it started working properly.

  if (confirm('Are you sure?')) {
    dragbox.delay(10).slideUp('fast', function () { ...

I'm not quite sure why this works but my animations are now working again in Safari 6.0.3 and Chrome 26.0.1410.43