簡化我的JQuery混亂

答案，從答案明顯略作修改：簡化我的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）。不希望這些變化是累積的，意味着面板應該是0,0;面板2應該始終是-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'); 
});

來源

2011-09-06 Wesley

你應該嘗試[這裏]（ http://codereview.stackexchange.com/） –

編輯：
正如我無法測試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); 
});

來源

2011-09-06 22:32:31

這幾乎可以工作，而且是最優雅的解決方案。唯一的問題是，它會立即回到原位。去看看我能否修復它。 – Wesley

標記爲你的答案，但糾正了一些事情。看我的帖子糾正。 – Wesley

謝謝韋斯利！快速輸入時，我拼錯了「easeOutCirc」！很高興你找到我的代碼中的錯字和錯誤（我無法測試它，所以我從腦海中寫下它），並且讓它成功了！胡拉！ –

對具有相同動畫屬性的選擇器使用逗號。例如：$（「＃C1，C2＃，＃C3，...」）

來源

2011-09-06 22:12:25

更好var myObj = $（「＃c1，＃c2，＃c3，」）。然後做myObj.animate（） –

這有助於減少很多代碼，但我不確定這是完整的難題。要嘗試一些事情，但這是非常有幫助的。給予好評。 – Wesley

如果你要整理，這些似乎都在做同樣的事情...爲什麼不不同的方式命名他們一點，或添加類，只是：

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

任何時候你在做兩件事情時，將它添加到一個函數（甚至是一個插件）是更加清晰的，再加上，你可以重用它！

祝你好運。

來源

2011-09-06 22:38:26

到別人怎麼說，類似的，使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);

來源

2011-09-06 23:03:39

這裏

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

來源

2012-11-09 00:36:12

簡化我的JQuery混亂

回答

相關問題