jQuery&&谷歌浏览器 [英] jQuery && Google Chrome

问题描述

此脚本在所有浏览器中都可以正常运行，但Google Chrome除外。
$ b

  $（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）
}，函数（）{
 $（this）.animate（{width：unhover_width，marginTop：0}，fast）
}）; 
}）; 
}）; 
  

Chrome无法识别变更的图片属性。

宽度 img更改时，高度也会更改。即使不在Chrome中

  $（this）.width（unhover_width）; 
 var unhover_height = $（this）.height（）; 
  

unhover_height 给出 0 。

此脚本的完整代码（包含html） - http://jsfiddle.net/BsqTe/

请帮助解决这个问题。

感谢。

解决方案

在jQuery ready 函数中，您需要记住图像可能尚未加载。即使图像还在加载，jQuery ready 函数的作用是在DOM准备就绪后立即触发。如果您想在所有图像加载完成后执行某些操作，请使用窗口的加载事件代替：

  $（window）.load（yourFunctionHere）; 
  




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.

解决方案

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);

这篇关于jQuery&&谷歌浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！