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。

原始问题：

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

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

对具有相同animate属性的选择器使用逗号。例如：$（“＃c1，＃c2，＃c3，...”）

Answer 2

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

这里：你的50行内容分为9行代码。

如果您的＃c1，＃c2 ..等具有相同的父级向他们所有人添加'。''Ex：<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)
})

简化我的JQuery Mess

5 个答案: