jQuery fadeOut does not work in Chrome?

In my page I make the following ajax call to load data from my controller action and inject it into a placeholder on the page:

$.ajax({
        url: '/Actors/GetActorsDataByFirstLetter?FirstLetter=' + firstLetter,
        success: function (ActorsData) {
            $(actorsList).html(ActorsData);
            if ($(actorsList).height() > 200) {
                $(actorsList).animate({ height: 200 }, 1000, function () {
                    $(ajaxLoader).fadeO开发者_开发百科ut(1000);
                });
            }
            else {
                /*This animation is a dummy to make the fadeOut work in Chrome*/
                $(actorsList).animate({ color: 'inherit' }, 1000, function () {
                    $(ajaxLoader).fadeOut(1000);
                });
            }
        },
        error: function () {
            $(actorsList).html('An error occurred whilst attempting to retrieve the data for actors whose name starts with ' + firstLetter);
        }
    });

The lists can get quite long, so on success I am collapsing the containers which exceed 200px in height. After that I fade out the corresponding ajax loading animation gif.

For some reason in Chrome, the animation gifs do not fade out for containers that do not get collapsed, i.e. for those that have a height less than 200px to start with. This only happens when I navigate to the page from another link and not when I reload the page... It works fine in FF under all circumstances.

As a fudge I have put an animation which does nothing on the containers which do not get collapsed and now it works... But I don't like it at all.

Can anybody see why the fadeOut() command wouldn't work on its own?

Hmmmm... I may be wrong, but it seems to me that in Firefox and all the browsers that work, the height() always returns > 200, but in Chrome, it returns < 200 if the content is small, so fadeOut() never gets called on content that is not collapsable....

In your code, it seems that without that "else" dummy block, the fadeOut() function will never be called on content that is less then 200 pixels. I would just get rid of that if / else statement. This is how I would do it.. (although I haven't tested it... Let me know how it goes.

$.ajax({
    url: '/Actors/GetActorsDataByFirstLetter?FirstLetter=' + firstLetter,
    success: function (ActorsData) {
        $(actorsList).html(ActorsData);
        var finalHeight = $(actorsList).height() > 200 ? 200 : $(actorsList).height();
        $(actorsList).animate({ height: finalHeight }, 1000, function () {
            $(ajaxLoader).fadeOut(1000);
        });
    },
    error: function () {
        $(actorsList).html('An error occurred whilst attempting to retrieve the data for actors whose name starts with ' + firstLetter);
    }
});