文章/答案/技术大牛

发布

社区首页 >问答首页 >合并jQuery菜单动画功能时出现问题

问合并jQuery菜单动画功能时出现问题
EN

Stack Overflow用户

提问于 2017-08-08 01:55:53

回答 1查看 26关注 0票数 0

我正在做一些动画效果，当一个菜单项被点击时，它会缩小页面上的某些div。这允许在主页的某些区域中为最终用户提供更多的屏幕空间。

我已经让这个函数正常工作了，但是我想把它巩固一下。下面是我的代码：

$('#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);
});

我弄不明白的是-上面的代码对一个菜单项来说工作得很好，但我还有三个菜单项要应用(比如#wp-tabbed-widget-2，...3，...4)。我不想复制/粘贴上面的代码，只想更改属性以匹配新按钮，因为这看起来既懒惰又混乱。

我知道我需要编写一些条件来监控哪个按钮被点击了才能做到这一点，但我现在想不起这个机制了。对我来说，写出漂亮整洁的东西最好的方法是什么？

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-08 02:06:50

$('#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);
});

只需在ID之间加逗号

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45552947

复制

相似问题

问合并jQuery菜单动画功能时出现问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并jQuery菜单动画功能时出现问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并jQuery菜单动画功能时出现问题
EN