Question

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"
                            .hide()
                                // 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.

Answer 1

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