jQuery && Google Chrome

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

当img的width改变时， 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); 

Answer 2

您可能希望注意到图像也具有onloadfunction。 此外，某些IE版本具有特殊性，如果图像已经加载，则事后不会触发附加到事件的任何onload函数。 所以这个小片段应该始终确保在加载图像后调用一些函数DoResize

 var DoResize = function() { ... } var img = $(".find .your img"); img.bind('load', DoResize); img.bind('error', DoResize); // in case picture fails to load, still resize if (img.get(0).complete) { DoResize(); }