JQueryがApple 2011の製品ブラウザを再現 - エラーを繰り返した後に

Question

JQueryとCSSを使用してapple.com 2011の製品ブラウザを再作成しています。ミッションは達成されましたが、ユーザーがメニューシステムを使用し続けると、間違った順序で誤ったアイテムが入ってきて不安定になります。

私はこの問題が特定の機能の遅延実行にあると考えており、天気が特定のブラウザに限定されているかどうかはわかりません。この問題はモバイルサファリの3回目のクリックで発生し、後でサファリとクロムをクリックする回数が多く、Firefoxの古いバージョンではまだ発生していません。

また、可能な場合はCSS3を使用するJQueryの拡張アニメーションプラグインも使用されます。

サンプル：http://jsfiddle.net/Y5anX/5/

$(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(p) { 
      $('li', this).delay(150).animate({left: -200, top:0, opacity:0, leaveTransforms:true}, 600); 
     }); 
     $('.bounceholder ul:eq(' + bounceholder + ')').nextAll().each(function(f){ 
      $('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 
    }); 

}); 

Answer 1

あなたがプラグインを向上させるアニメーションせずにそれを試みたことがありますか？アニメーションのキューイングに時々干渉することがあります。