为什么这个jQuery图像交换无法在Chrome和Firefox中

Question

第一负载

我试图使用jQuery的翻转（淡入）替换图像，你可以看到这个底部的工作离开这里：

http://www.anzie.com/index_rollover.php

但是，在铬中，它只是渐近近乎不透明。并在第一次加载Firefox时，我会在左上角看到一个小蓝框（好像它不在位置）。但后来刷新它在Firefox中工作。这在我自己的机器上完美地工作，当我在线尝试时它不起作用。这导致我不能及时加载图像？我不知道该怎么做..

这里是我的PHP：

<a href="<?php echo tep_href_link(FILENAME_EVENTS); ?>"><img src="images/home_buttons/water_bag.jpg" alt="watch la vie en couleur" border="0" align="left" hoverImg="images/home_buttons/water_bag-hover.jpg" /></a> 

这里是JavaScript：

<script type="text/javascript"> 
$(document).ready(function() { 

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this) 
    $this.wrap('<div>')  
    $this.parent().css('width',$this.width()) 
    $this.parent().css('height',$this.height()) 
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")") 
     $this.hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
}); 


}); 
</script> 

Answer 1

当我右键单击铬并说“检查”;你的高度/宽度设置为0px。如果我通过chromes工具内联编辑您的高度/宽度，则会显示图像。尝试jQuery的outerWidth（），看看是否提供更好的结果。

http://api.jquery.com/outerWidth/

Answer 2

尝试调用你的代码

$(document).load(...) 

代替。图像没有准备好在ready。加载是任何具有src属性的回调。所以一旦所有这些加载（包括图像），它会触发。你也可以在图像上调用它。例如

$('img').load(function() ...); 

性能的方法链接。

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this) 
    $this.wrap('<div>')  
     .parent() 
       .css('width',$this.width()) 
       .css('height',$this.height()) 
       .css('background-image',"url(" + $this.attr('hoverImg')+")") 
     .end() 
     .hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
});