此脚本适用于除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/
请帮忙解决这个问题。
感谢。
答案 0 :(得分:7)
如果您正在使用jQuery ready
函数中的图像进行操作,则需要记住图像可能尚未加载。 jQuery ready
函数的目的是在DOM准备就绪时立即触发,即使图像仍在加载。如果您想在所有图片加载完毕后执行某些操作,请改为使用window
的{{1}}事件:
load
答案 1 :(得分:0)
您可能需要注意图像也有onload功能。此外,某些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(); }