Home/ Questions/Q 6537407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:36:47+00:00

Answer, slightly modified from marked answer: var eoc = easeOutCirc,mNSS = ‘metrsoNavSpanSelected’; $(‘.metroNavSpan’).click(function(){ var

  • 0

Answer, slightly modified from marked answer:

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

Changes: Spelling on eastOutCirc was fixed 🙂

background postion animation changed from -= (65*ind) to just (-65*ind). Didn’t want the changes to be cumulitive, meaning panel one should be 0,0; panel two should be -65,0 always. -= was accumulating clicks so that going back and forth between panel 4 and 5 would end up with very large – numbers.

nextAll and prevAll were separated, as keeping them in the same line was always snapping panels back to panel 1 after animation.

Original Question:

I have a series of panels I’m animating in a Metro style for a website. The problem is, I’m not seeing a good way to do the below in fewer lines of code. How can I do something like this in a more compact elegant fashion?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT:
    As I could not test the code the OP made great working changes on this one. Look at the Question to find the real working answer!

    Here: your 50 liner into 9 lines of code.

    If your #c1, #c2.. .and so on have a same parent
    add to all of them a class ‘.el’ 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);
});
    • 0