问题整理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菜单动画功能

回答

相关问题