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”

告诉我，如果它仍然无法正常工作。