javascript - 简化我的 JQuery 困惑

Question

答案，对标记答案稍作修改:

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)。不希望更改是累积的，这意味着第一个面板应该是 0,0；第二个面板应始终为 -65,0。 -= 正在累积点击次数，因此在面板 4 和面板 5 之间来回移动最终会得到非常大的 - 数字。

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

原始问题:

我正在为网站制作一系列 Metro 风格的动画面板。问题是，我没有找到用更少的代码行执行以下操作的好方法。我怎样才能以更紧凑优雅的方式做这样的事情？

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

Answer 1

对于具有相同动画属性的选择器使用逗号。例如:$("#c1, #c2, #c3, ...")