我正在研究一些動畫效果,當單擊菜單項時會縮小頁面上的某些div。這允許最終用戶在主頁的某些區域中具有更多的屏幕空間。問題整理jQuery菜單動畫功能
我有功能工作,但我想鞏固一下。下面是我的代碼:
$('#wp-tabbed-widget-2').click(function() {
$('.site-title').animate(
{fontSize: "16px"},
200);
$('.title-area').animate(
{width: "200px",
paddingLeft: "10px"},
400);
$('.site-header').animate(
{minHeight: "50px"},
400);
$('#header-logo').animate(
{width: "40px",
paddingLeft: "10px"},
400);
});
什麼我有麻煩搞清楚是這樣的 - 上面的代碼工作正常,一個菜單項,但我有3個,我想這適用於(比方說#wp-tabbed-widget-2,... 3,... 4)。我不想複製/粘貼上面的代碼,只是改變屬性來匹配新的按鈕,因爲這看起來很懶惰和凌亂。
我知道我需要編寫一些條件來監視點擊哪個按鈕才能做到這一點,但是現在我的機制正在逃避我。對於我來說,寫出一些漂亮而整潔的東西的最佳方式是什麼?
你能證明你的HTML代碼中的ID的? – Dij
如果您使用上述多個div,請確保您區分'header-logo'元素的ID,以便您沒有具有相同ID的多個徽標。 – freginold