简化我的 JQuery 混乱

Question

我正在为网站制作一系列 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, ...")

Answer 2

编辑：
由于我无法测试代码，OP 对此做了很大的工作更改。查看问题以找到真正有效的答案！

这里：你的 50 行代码变成了 9 行代码。

如果您的#c1、#c2...等有相同的父级 向所有这些添加一个类 '.el' 例如：

<div id="c2" class="el"></div>

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

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

Answer 3

与其他人所说的类似，为您想要执行的操作创建 1 个函数，然后使用不同的参数调用它：

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);

Answer 4

如果你想组织起来，这些似乎都在做同样的事情......为什么不稍微不同地命名它们，或者添加类，然后：

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

任何时候你要做两件事，将其添加到函数（甚至插件）中会更干净，而且，你可以重用它！

祝你好运。

Answer 5

这里

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)
})