jQuery && Google Chrome

Question

This script works perfectly in all the browsers, except Google Chrome.

$(document).ready(function(){
    $(".banners-anim img").each(function(){
        var hover_width = $(this).width();
        var hover_height = $(this).height();
        var unhover_width = (hover_width - 30);
        $(this).width(unhover_width);
        var unhover_height = $(this).height();
        $(this).closest("li").height(unhover_height);
        var offset = "-" + ((hover_height - unhover_height)/2) + "px";
        $(this).closest("span").css({'position':'absolute', 'left':'0', 'top':'25px', 'width':'100%'});
        $(this).hover(function(){
            $(this).animate({width: hover_width, marginTop: offset}, "fast")
        },function(){
            $(this).animate({width: unhover_width, marginTop: 0}, "fast")
        });
    });
});

Chrome doesn't recognize changed image attributes.

When width of the img changes, height also changes. Even not in Chrome..

$(this).width(unhover_width);
var unhover_height = $(this).height();

unhover_height gives 0.

Full code of this script (html included) - http://jsfiddle.net/BsqTe/

Please help to fix this.

Thanks.

Answer 1

If you're doing things with images from within the jQuery ready function, you need to remember that the images may not be loaded yet. The purpose of the jQuery ready function is to fire as soon as the DOM is ready, even if images are still loading. If you want to do something when all images have finished loading, use window's load event instead:

$(window).load(yourFunctionHere);