Javascript 简化我的JQuery混乱

答案，从标记答案略为修改：

var eoc = "easeOutCirc",mNSS = 'metrsoNavSpanSelected';

$('.metroNavSpan').click(function(){
    var ind = $(this).index();
    $('.content-box').eq(ind).prevAll().animate({marginLeft: -1040},750,eoc);
    $('.content-box').eq(ind).nextAll().andSelf().animate({marginLeft: 0},750,eoc);
    $('#fake').animate({backgroundPosition: (-65*ind)},1550,eoc);
    $('.metroNavSpan').removeClass(mNSS);
    $(this).addClass(mNSS);
});

更改：eastOutCirc上的拼写已修复：）

背景位置动画从-=（65*ind）更改为（-65*ind）。不希望更改是累积的，这意味着面板1应为0,0；面板二应始终为-65,0。-=正在累积点击次数，因此在面板4和面板5之间来回移动会得到非常大的数字

nextAll和prevAll是分开的，因为将它们保持在同一行总是在动画之后将面板捕捉回面板1

原始问题：

var eoc = "easeOutCirc",mNSS = 'metrsoNavSpanSelected';

$('.metroNavSpan').click(function(){
    var ind = $(this).index();
    $('.content-box').eq(ind).prevAll().animate({marginLeft: -1040},750,eoc);
    $('.content-box').eq(ind).nextAll().andSelf().animate({marginLeft: 0},750,eoc);
    $('#fake').animate({backgroundPosition: (-65*ind)},1550,eoc);
    $('.metroNavSpan').removeClass(mNSS);
    $(this).addClass(mNSS);
});

我有一系列的面板，我正在为一个网站制作地铁风格的动画。问题是，我没有看到用更少的代码行来完成下面的工作的好方法。我怎样才能以更简洁优雅的方式做这样的事情

$('#metroNow').click(function() {
    $("#c1").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c2").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c3").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c4").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c5").animate({marginLeft: 0},750,"easeOutCirc");
    $('#fake').animate({backgroundPosition: 0}, 1550, "easeOutCirc");
    $('.metroNavSpan').removeClass('metroNavSpanSelected');
    $('#metroNow').addClass('metroNavSpanSelected');
});
$('#metroPeople').click(function() {
    $("#c1").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c2").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c3").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c4").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c5").animate({marginLeft: 0},750,"easeOutCirc");
    $('#fake').animate({backgroundPosition: -65}, 1550, "easeOutCirc");
    $('.metroNavSpan').removeClass('metroNavSpanSelected');
    $('#metroPeople').addClass('metroNavSpanSelected');
});
$('#metroInfopedia').click(function() {
    $("#c1").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c2").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c3").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c4").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c5").animate({marginLeft: 0},750,"easeOutCirc");
    $('#fake').animate({backgroundPosition: -130}, 1550, "easeOutCirc");
    $('.metroNavSpan').removeClass('metroNavSpanSelected');
    $('#metroInfopedia').addClass('metroNavSpanSelected');
});
$('#metroVideos').click(function() {
    $("#c1").animate({marginLeft: -1040},750, "easeOutCirc");
    $("#c2").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c3").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c4").animate({marginLeft: 0},750,"easeOutCirc");
    $("#c5").animate({marginLeft: 0},750,"easeOutCirc");
    $('#fake').animate({backgroundPosition: -195}, 1550, "easeOutCirc");
    $('.metroNavSpan').removeClass('metroNavSpanSelected');
    $('#metroVideos').addClass('metroNavSpanSelected');
});
$('#metroAbout').click(function() {
    $("#c1").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c2").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c3").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c4").animate({marginLeft: -1040},750,"easeOutCirc");
    $("#c5").animate({marginLeft: 0},750,"easeOutCirc");
    $('#fake').animate({backgroundPosition: -260}, 1550, "easeOutCirc");
    $('.metroNavSpan').removeClass('metroNavSpanSelected');
    $('#metroAbout').addClass('metroNavSpanSelected');
});

---

对具有相同动画属性的选择器使用逗号。例如：$（“#c1，#c2，#c3，…）

编辑：
由于我无法测试代码，OP对此代码进行了很大的工作更改。看看这个问题，找到真正可行的答案

这里：你的50行代码分成9行

如果你的#c1，#c2。等等都有相同的父母 为所有这些文件添加一个类“.el”Ex:

---

如果你试图组织，这些似乎都在做同样的事情。。。为什么不给它们取个不同的名字，或者添加类，然后：

function animateMyDivs(obj, marginLeft, val, animType){
    obj.animate({marginLeft: marginLeft},val,animType);
}

加载后

$('[id*="divIDStartsWith"]').each(function () {
    $(this).bind('click',function(){
        animateMyDivs($(this), -1400, 750, 'easeOutCirc');
    })
})

任何时候你在做两件事，把它添加到一个函数（甚至是一个插件）会更干净，而且，你可以重用它

---

祝你好运。

与其他人所说的类似，为你要做的事情创建一个函数，然后用不同的参数调用它：

var totalCTags = 5
function initMetroLink(link, index) {
    $(link).click(function() {
        for (var i=1; i<=totalCTags; ++i) {
            var margin = (index<=i ? -1040 : 0);
            $("#c"+i).animate({marginLeft: margin}, 750, "easeOutCirc");
        }
        var fakePosition = index * -65;
        $('#fake').animate({backgroundPosition: fakePosition}, 1550, "easeOutCirc");
        $('.metroNavSpan').removeClass('metroNavSpanSelected');
        $(link).addClass('metroNavSpanSelected');
    });
}

initMetroLink("#metroNow", 0);
initMetroLink("#metroPeople", 1);
initMetroLink("#metroInfopedia", 2);
initMetroLink("#metroVideos", 3);
initMetroLink("#metroAbout", 4);

var totalCTags=5
函数initMetroLink（链接、索引）{
$（链接）。单击（函数（）{
对于（var i=1；此处i）

最好执行var myObj=$（“#c1、#c2、#c3”），然后执行myObj.animate（）这有助于减少大量代码，但我不确定这是否是整个谜题。我将尝试一些东西，但这是非常有帮助的。Upvote。你应该尝试一下这几乎是有效的，而且是最简单的解决方案。唯一的问题是，它会立即恢复到正确的位置。我想看看我是否可以修复它。标记你的答案，但更正了一些东西。请参阅我的帖子以获取corrections。谢谢Wesley！我在快速打字时拼错了“easeOutCirc”！很高兴你在我的代码中发现了拼写错误和错误（我无法测试它，所以我是凭我的想法写的），你成功了！呼！
var eoc = "easeOutCirc",
mNSS = "metrsoNavSpanSelected";
$(".metroNavSpan")
.click(function () {
var a = $(this)
    .index();
$(".content-box")
    .eq(a)
    .prevAll()
    .animate({
    marginLeft: -1040
}, 750, eoc), $(".content-box")
    .eq(a)
    .nextAll()
    .andSelf()
    .animate({
    marginLeft: 0
}, 750, eoc), $("#fake")
    .animate({
    backgroundPosition: -65 * a
}, 1550, eoc), $(".metroNavSpan")
    .removeClass(mNSS), $(this)
    .addClass(mNSS)
})