jQuery && Google Chrome

Question

此脚本适用于除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无法识别已更改的图像属性.

当widthimg改变时,height也会发生变化.即使不在Chrome中 ..

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

unhover_height给0.

这个脚本的完整代码(包括html) - http://jsfiddle.net/BsqTe/

请帮忙解决这个问题.

谢谢.

Answer 1

如果您正在使用jQuery ready函数中的图像进行操作,则需要记住图像可能尚未加载.jQuery ready函数的目的是在DOM准备就绪时立即触发,即使图像仍在加载.如果你想要做的事时,所有图像都已完成加载,使用window的load事件,而不是:

$(window).load(yourFunctionHere);