Блог

Я работал над воссозданием нового браузера продукта Apple, как показано на их страницах Mac и iPod.

Пока я зашел так далеко http://jsfiddle.net/xvzjY/3 /

Проблема в том, что я не могу получить выход элемента 1 на 1 таким же образом, как они вводятся. Я удалил код, который я написал, чтобы попытаться эмулировать это, поскольку это мешало функции ввода. Кто-нибудь может понять, как сделать это максимально аутентичным.

 $(document).ready(function(){
    var bounceholder = 0;
    var delayact = 0;
    $('.bouncetabs a').click(function(){
        $('.bouncetabs a').removeClass('active');
        $(this).addClass('active');

        if($(this).index('.bouncetabs a') < bounceholder) { var backwards = 1 }
        else { var backwards = 0 }

        bounceholder = $(this).index('.bouncetabs a');
        var bounceoffset = 0;

        if($('.bounceholder ul:eq('   bounceholder   ') li').length == 6){ var bounceoffset = 0;}
        else if($('.bounceholder ul:eq('   bounceholder   ') li').length == 5){ var bounceoffset = 72;}
        else if($('.bounceholder ul:eq('   bounceholder   ') li').length == 4){ var bounceoffset = 144;}
        else if($('.bounceholder ul:eq('   bounceholder   ') li').length == 3){ var bounceoffset = 216;}
        else if($('.bounceholder ul:eq('   bounceholder   ') li').length == 2){ var bounceoffset = 288;}

        $('.bounceholder ul:eq('   bounceholder   ')').prevAll().each(function(i) {
            $('li', this).delay(150).animate({left: -200, top:0, opacity:0, leaveTransforms:true}, 600);
        });
        $('.bounceholder ul:eq('   bounceholder   ')').nextAll().each(function(i){
            $('li', this).delay(150).animate({left:  1000, top:0, opacity:0, leaveTransforms:true}, 600);
        });

            if(backwards == 1) {
                bounceoffset = 800 - bounceoffset;
                $($('.bounceholder ul:eq('   bounceholder   ') li').get().reverse()).each(function(i){
                  delay = (i   1) * 250;
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset -= 160;
                });
            }
            else {
                $('.bounceholder ul:eq('   bounceholder   ') li').each(function(i){
                  delay = (i   1) * (250 * delayact);
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset  = 160;
                });
            }
            delayact = 1;

    return false
    });

});