問題整理jQuery菜單動畫功能

我正在研究一些動畫效果，當單擊菜單項時會縮小頁面上的某些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）。我不想複製/粘貼上面的代碼，只是改變屬性來匹配新的按鈕，因爲這看起來很懶惰和凌亂。

我知道我需要編寫一些條件來監視點擊哪個按鈕才能做到這一點，但是現在我的機制正在逃避我。對於我來說，寫出一些漂亮而整潔的東西的最佳方式是什麼？

來源

2017-08-07 Jensen010

你能證明你的HTML代碼中的ID的？ – Dij

如果您使用上述多個div，請確保您區分'header-logo'元素的ID，以便您沒有具有相同ID的多個徽標。 – freginold

$('#wp-tabbed-widget-2,#wp-tabbed-widget-3,#wp-tabbed-widget-4').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); 
});

只要把逗號之間

來源

2017-08-07 18:06:49 ChibbstheReaper

你不需要在這裏有一個'this'或者一個子選擇器，只針對被點擊的小部件中的div？ – freginold

如果點擊函數內引用的元素對每個項目都是特定的，那麼是的，但是基於類的問題和標題，它似乎並不是這種情況。 – ChibbstheReaper

omg，我怎麼沒有想到這一點.... 謝謝你，因爲我的腦子都在醒着:) – Jensen010

問題整理jQuery菜單動畫功能

回答

相關問題