問題與寬度和高度<img> in .animate（）

我有一個div。 div內是另一組div，每個div都包含img。我試圖設置一個鼠標，使當前img使用.hover（）和.animate（）展開。我希望代碼能夠確定它是橫向還是縱向圖像，然後在寬度或高度上將其展開，以不超過包含div的邊界。問題與寬度和高度<img> in .animate（）

這裏是文檔準備好的代碼。

$('.clGalleryImage').hover(function() { 
    $varHeight = $('.clGalleryImage:hover').height(); 
    $varWidth = $('.clGalleryImage:hover').width(); 
    if($varHeight > $varWidth) { 
     $('.clGalleryImage:hover').animate({marginTop:0, height:125}, 'slow'); 
    } else { 
     $('.clGalleryImage:hover').animate({marginLeft:0, width:125}, 'slow'); 
    } 
}, function() { 
    ... 
});

.hover的handlerOut部分是不完整的，所以忽略它。問題出在handlerIn中。當我將鼠標懸停在肖像上的img上時，該功能效果很好。圖像按比例增大寬度和高度，並在包含div的邊框處停止增長。但是當我將鼠標懸停在img上（上面代碼中的其他部分）時，它只會在寬度上增長，而不是按比例增長。這是設計嗎？

我很抱歉如果這是一個新手問題，但它一直在竊聽我整天。最終我編碼它在我選擇的圖像周圍手動工作。我寧願代碼與圖像的任何比例一起工作，然後必須在使用它之前編輯圖像。

謝謝

我想我應該包括div和CSS。

股利

<div class="clGalleryImageContainer"> 
    <img class="clGalleryImage" src="/New/Images/Molds/Molds001_th.jpg" alt="Mold Gallery Image 001" title="This is some description Text." /> 
</div>

的CSS

.clGalleryImage { display:block; height:100px; margin-left:auto; margin-right:auto; margin-top:12px;} 
.clGalleryImageContainer { position:relative; float:left; width:150px; height:125px; border: 1px solid white; background-color:black; margin-top:12px; margin-left:21px; margin-bottom:12px;}

來源

2010-02-12 Albion

你有高度的CSS height:100px;設定.animate()會尊重這種風格，讓它在整個動畫。在另一個動畫中，你明確地告訴它改變高度，所以它會。

所以答案是是，這是設計。

來源

2010-02-12 02:52:32

感謝您指出。令人驚訝的是，人們可能會錯過最簡單的事情。順便說一句，有沒有辦法在CSS中設置高度並強制jQuery忽略它？否則，我必須使我的縮略圖全部高100px。 – Albion 2010-02-12 13:32:58

@Albion - 有一些插件可以保持規模，這將是最快的路線，請嘗試如下所示：http://ditio.net/2010/01/02/jquery-image-resize-plugin/您可以它的高度，寬度或比例，它會在達到任何限制時停止，並保持寬高比。 – 2010-02-12 13:42:07

問題與寬度和高度<img> in .animate（）

回答

相關問題