JQuery Animation

我正在玩Jquery .animate，並試圖做一些基本的圖像動畫，我在鼠標上展開圖像。但是，我有4個圖像，並且當前只要展開一個圖像就會影響其他圖像。我如何讓他們彼此獨立？JQuery Animation

<div class="logos"> 
    <img align="top" id="imgBuffalo" src="../../../../Content/Images/buffalo.png" width="80" height="60" />&nbsp;&nbsp; 
    <img align="top" id="imgIndianapolis" src="../../../../Content/Images/indianapolis.png" width="80" height="60" />&nbsp;&nbsp; 
    <img align="top" id="imgMiami" src="../../../../Content/Images/miami.png" width="80" height="60" />&nbsp;&nbsp; 
    <img align="top" id="imgNYJets" src="../../../../Content/Images/nyjets.png" width="80" height="60" /> 
    </div> 


$(document).ready(function() { 

     $("#imgBuffalo").mouseover(function() { 
      $("#imgBuffalo").animate({ width: "90px", height: "70px" }, 500); 
     }); 

     $("#imgBuffalo").mouseleave(function() { 
      $("#imgBuffalo").animate({ width: "80px", height: "60px" }, 500); 
     }); 

     $("#imgIndianapolis").mouseover(function() { 
      $("#imgIndianapolis").animate({ width: "90px", height: "70px" }, 500); 
     }); 

     $("#imgIndianapolis").mouseleave(function() { 
      $("#imgIndianapolis").animate({ width: "80px", height: "60px" }, 500); 
     }); 

     $("#imgMiami").mouseover(function() { 
      $("#imgMiami").animate({ width: "90px", height: "70px" }, 500); 
     }); 

     $("#imgMiami").mouseleave(function() { 
      $("#imgMiami").animate({ width: "80px", height: "60px" }, 500); 
     }); 

     $("#imgNYJets").mouseover(function() { 
      $("#imgNYJets").animate({ width: "90px", height: "70px" }, 500); 
     }); 

     $("#imgNYJets").mouseleave(function() { 
      $("#imgNYJets").animate({ width: "80px", height: "60px" }, 500); 
     });

來源

2011-03-07 user517406

圖像在同一個z-index上相互嵌套，所以調整大小會將其他人推開。你想要什麼樣的行爲？ – Jake 2011-03-07 20:02:22

嘗試通過僅在輸入時觸發事件的「mouseenter」更改「鼠標懸停」。 – Akarun 2011-03-07 20:02:54

快速建議：只需使用「$（'.logos img'）」就可以大幅縮短這段代碼，它將作用於任何帶有「標誌」類的「div」標籤內的任何「img」標籤。 – 2011-03-07 20:05:41

你的意思是它移動其他圖像，因爲一個圖像正在擴大？如果你不希望它們影響到彼此，你將不得不將每個圖像放到一個絕對div中，並將包含活動動畫的div的z-index更改爲最高。

來源

2011-03-07 19:59:54

使用animate方法可以有效地改變它所作用元素的CSS。由於您的圖片只是簡單地相互嵌套，因此更改其中一個的尺寸將會影響其他尺寸。

您可以嘗試使用position: relative或position: absolute進行播放，以便在尺寸發生變化時圖片不會移動，但是您將在各瀏覽器中獲得不一致的結果。

如果你正在尋找一個彈出式擴展類型的效果，我建議創建一個新的div，然後克隆到該圖像。然後你可以做任何你想要的浮動div /圖像，而不會影響其他人。

根據您目前使用的動畫，它看起來像是在嘗試實現與Apple Dock動畫類似的功能。已經有許多可用的jquery plugins，而不是直接手動編碼動畫。

來源

2011-03-07 20:00:43

另外，如果您正在尋找彈出效果，請確保不僅要更改寬度和高度，還要從「左」css位置減去一半的寬度差（在本例中爲5px），並且相同的高度和CSS「頂部」。這樣它就會向用戶擴展。 – 2011-03-07 20:10:48

-1

您最好的選擇是將您的標誌絕對放置在屏幕上。這將使他們不會相互衝突。給每個img一個「徽標」類或類似的東西。

.logo { position : 'absolute'; }

然後根據每個標識的ID來放置每個標識。

接下來，我建議使用.hover（）而不是mouseover和mouseleave。這使您能夠使用較少的代碼設置兩個事件處理程序。

$('.logo').hover(function() { 
    $(this).animate({ width: "90px", height: "70px", top : "5 less px than set in css", left : "5 less than set in css" }, 500); 
}, function() { 
    $(this).animate({ width: "80px", height: "60px", top : "Reset to css", left : "reset to css" }, 500); 
}

請閱讀http://api.jquery.com/hover/瞭解更多詳情。

你在jQuery中學習一些很酷的效果的正確途徑。保持！

來源

2011-03-07 20:39:22

回答

相關問題