jQuery анимационные проблемы?

Question

До сих пор у меня довольно приличный код для анимации центральной коробки. По какой-то причине, когда я просматриваю это на разных браузерах и компьютере (Mac и ПК), я получаю разные результаты. Можно показать более быструю скорость анимации, в то время как другая идеальна. Я также заметил, что когда окно анимируется слева направо, происходит заикание, а анимация дрочит. Я не могу больше объяснить это. Мой код ниже:

$(document).ready(function(){ 

     isAnimating = false; 

$('.wrapper').on('click', '.arrow-left', function() { 
    if(isAnimating) return; 

    isAnimating = true; 
    var $current = $(this).parents('.signupBox'); 
    var $next = $(this).parents('.signupBox').next(); 

    $current.stop(true,true).animate({ 
     left: "200%" 
    }, 500, 'linear', function() { 
     $current.css({ 
       left: "-200%" 
      }).appendTo('.wrapper'); // move to end of stack 

     $next.css({ 
       left: "-200%" 
      }).stop(true,true).animate({ 
       left: "0%" 
      }, 500, 'linear', function() { 
       isAnimating = false; 
      }); 
    }); 

}).on('click', '.arrow-right', function() { 
    if(isAnimating) return; 

    isAnimating = true; 
    var $current = $(this).parents('.signupBox'); 
    var $next = $(this).parents('.signupBox').siblings().last(); 

    $current.stop(true,true).animate({ 
     left: "-200%" 
    }, 500, 'linear', function() { 
     $current.css({ 
       left: "200%" 
      }); 

     $next.prependTo('.wrapper') // move to front of stack 
      .css({ 
       left: "200%" 
      }).stop(true,true).animate({ 
       left: "0%" 
      }, 500, 'linear', function() { 
       isAnimating = false; 
      }); 
    }); 
}); 

}); 

Некоторые CSS:

.signupBox:first-child { 
    display: block; 
} 
.signupBox { 
    display: none; 
} 

.wrapper 
{ 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
} 

Here's a JSFiddle показывает, что происходит, мы надеемся, вы можете увидеть, что проблема там.

Тогда анимация справа налево (нажмите на < символ и вы увидите slign изменение скорости.

Answer 1

Различные браузеры могут иметь разные результаты при использовании JS и CSS переходы, это на самом деле зависит от скорости машины , скорость браузера также зависит от того, сколько открытых вкладок у вас есть в каждом браузере, плагины браузеров также могут заморозить анимацию. Другие события JS также:

Я проверил ваш код в Chrome, FF (wasn ' t можно проверить его в IE11, похоже, что JS-ошибки на jsfiddler с использованием jQuery). Не упоминал ничего странного.

Я могу рекомендовать использовать анимационную библиотеку Greenshock JS. http://www.greensock.com/get-started-js/ Говорят, что в x20 раз быстрее оживить jQuery. Но я думаю, что на самом деле может быть в 2,3)

Этот libruary основан на библиотеке Flash, которая использовалась кодами Action Script для создания анимаций красоты во Flash.