jquery圖像調整大小懸停不適用於Firefox正常

Question

我做了一個使用jQuery和CSS的畫廊。 我做了改變圖像的功能，它調整了「懸停/不懸停/點擊」的大小，所以它會適合輸出「div」。它適用於Chrome瀏覽器，但FireFox會有點混亂。它僅在另一個「懸停/取消懸停/單擊」之後應用尺寸調整大小。

這是輸出div的HTML 「幻燈片」

<div class="leftPart"> 
    <div class="onFlyActualView"> 
     <div class="Slides"><img src="ecchi/000-Girl.jpg" alt="#" /></div> 
    </div> 
    <div class="onFlyDescription"></div> 
</div> 

這是最小化的項目：

<div class="rightPart"> 
    <div class="onFlyMiniView"> 
     <ul class="oFMVLines"> 
      <li> 
       <ul class="oFMVItems"> 
        <li>0</li> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
       </ul> 
      </li> 
      <li> 
       <ul class="oFMVItems"> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 

這是 「.Slides」 類的CSS：

.Slides { 
height: auto; 
width: auto;  
margin: 0px auto; 
position: static; 
vertical-align: middle; 
} 

.Slides img 
{ 
border: 1px solid #0F0; 
display: block; 
position: static; 
margin-top: 5px; 
margin-right: auto; 
margin-bottom: 5px; 
margin-left: auto; 
height: auto; 
width: auto; 
} 

這裏是調整大小的JQuery（curH，curW是全局變量）：

function onFlyResize(iImage) { 

    var max_size = 590; 
    var divNum; 
    var h, w; 


    $(iImage).css({ height: 'auto', width: 'auto' }); 
    //$(iImage).css({ height: '0', width: '0' }); 
    $(iImage).each(function() { 
     curH = parseFloat($(this).attr('height')); 
     curW = parseFloat($(this).attr('width')); 


     console.log('w: ' + curW + '; h: ' + curH); 
     //$(this).css({ height: curH, width: curW }); 
     if (curH > curW) { 
      //var h = max_size; 
      divNum = curH/max_size; 
      h = max_size; 
      w = Math.ceil(curW/divNum); 
      //alert("Height larger!"); 
     } else { 
      divNum = curW/max_size; 
      h = Math.ceil(curH/divNum); 
      w = max_size; 
      var tempVar = 0; 
      tempVar = Math.ceil((max_size - curH)/2); 
      //alert("Width larger!"); 
     } 
     $(this).css({ height: h, width: w }); 
    }); 
}; 

這裏是卡列斯它在「懸停/ unhover /點擊」 JQuery的：

function onFlyGalleryImplement() 
{ 
var CurrImg = $(".Slides").find('img:first').attr('src'); 
var cur_li_cont = "0"; 
$(".oFMVItems li").hover(
    function() { 
     $(this).css({ border: "solid 2px #06C", margin: "-1px 1px 0px 3px" }).show(400); 
     cur_li_cont = $(this).text(); 
     var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg"; 
     $(".Slides").find('img:first').attr({ src: set_img_to }); 
     $(".Slides").find('img:first').attr("alt", $(".Slides").find('img:first').attr("src")); 
     $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + "."); 
     onFlyResize($(".Slides img")); 
    }, 
    function() { 
     $(this).css({ border: "solid 1px #333", margin: "0px 2px 0px 4px" }); 
     $(".Slides").find('img:first').attr("src", CurrImg); 
     $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + "."); 
     onFlyResize($(".Slides img")); 
    }); 
    onFlyResize($(".Slides img")); 

$(".oFMVItems li").click(function() { 
     cur_li_cont = $(this).text(); 
     var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg"; 
     $(".Slides").find('img:first').attr('src', set_img_to); 
     CurrImg = set_img_to; 
     $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + "."); 
     onFlyResize($(".Slides img")); 
    }); 
    onFlyResize($(".Slides img")); 
}; 

$(window).load(function() { 
onFlyResize($(".Slides img")); //A fix to start image resied for the output restrictions. 
}); 

$("document").ready(function() { 
onFlyGalleryPreloadModule(); //Function for images preload. 
onFlyGalleryImplement(); // Function that runs all gallery core. 
}); 

原來是這樣......已經近30個小時它的工作並不能找出什麼問題。如果有人知道爲什麼它會發生，所以他會爲我節省時間。

身份證：sry for bad enlish。

Answer 1

取而代之的是：

$(this).css({ height: h, width: w }); 

試試這個：

$(this).height(h); 
$(this).width(w); 

所以你的jQuery調整代碼將變爲：

function onFlyResize(iImage) { 

    var max_size = 590; 
    var divNum; 
    var h, w; 


    $(iImage).css({ height: 'auto', width: 'auto' }); 
    //$(iImage).css({ height: '0', width: '0' }); 
    $(iImage).each(function() { 
     curH = parseFloat($(this).attr('height')); 
     curW = parseFloat($(this).attr('width')); 


     console.log('w: ' + curW + '; h: ' + curH); 
     //$(this).css({ height: curH, width: curW }); 
     if (curH > curW) { 
      //var h = max_size; 
      divNum = curH/max_size; 
      h = max_size; 
      w = Math.ceil(curW/divNum); 
      //alert("Height larger!"); 
     } else { 
      divNum = curW/max_size; 
      h = Math.ceil(curH/divNum); 
      w = max_size; 
      var tempVar = 0; 
      tempVar = Math.ceil((max_size - curH)/2); 
      //alert("Width larger!"); 
     } 
     $(this).height(h).width(w); 
    }); 
}; 

爲什麼$(this).css({height: h, width: w});將無法​​正常工作的原因：

• 你不能簡單地供應的高度和寬度的數值，必須附加「PX」

告訴我，如果它仍然無法正常工作。