Smoothen jQuery animation

Question

На my website построен с Rails 4, я использую функцию jQuery's animate. Тем не менее, похоже, что он не работает очень плавно. В моем application.js, мой код под $(window).load:

Вот пример блока одушевленным:

$('.background').animate({right: '-2000px'}, 1000, function(){ 
     $($('nav a.active').attr('href')).css("display","none"); 
     $('nav a.active').removeClass('active'); 
     $('.photos').css("display","none"); 
     $(e.currentTarget).addClass('active'); 
     hash = $('nav a.active').prop("hash"); 
     target = document.getElementById(hash.slice(1)); 
     $('.background').animate({right: '0px'}, 1000, function(){ 
      $(target).fadeIn(300); 
      navFix(); 
     }); 
}); 

Что я могу сделать, чтобы сделать это более гладкой? Вы можете просмотреть вопрос в прямом эфире here, нажав на ссылку навигации слева.

Answer 1

Проблема в том, что ваш CSS борется с JS (с jQuery). В частности, ваши переходы сражаются с вашей анимацией.

В вашем CSS, вы добавили CSS3 transition к .background класса:

-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
-ms-transition: all 0.3s ease; 
transition: all 0.3s ease; 

Так в любое время изменять любые свойства CSS ваши .background «ы, которые могут быть перешедших, он собирается попытаться использовать эта скорость перехода. К сожалению для вас свойство CSS right - это свойство, которое можно перевести. Поэтому, когда вы оживляете свой фон длительностью 1000 мс, он борется с вашим CSS, который хочет сделать это с продолжительностью 300 мс.

Так что либо используйте переход, либо анимацию jQuery, но не оба одновременно.

Fix 1. Если устранить проблему и дать вам продолжительность 300мс:

$('.background').css({right: '-2000px'}, function(){ 
     $($('nav a.active').attr('href')).css("display","none"); 
     $('nav a.active').removeClass('active'); 
     $('.photos').css("display","none"); 
     $(e.currentTarget).addClass('active'); 
     hash = $('nav a.active').prop("hash"); 
     target = document.getElementById(hash.slice(1)); 
     $('.background').animate({right: '0px'}, 1000, function(){ 
      $(target).fadeIn(300); 
      navFix(); 
     }); 
}); 

Fix 2. Если исправить вашу проблему и дать вам продолжительность 1000ms:

/* in your CSS */ 
.background { 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
    /* overriding the transition property that was applied to all*/ 
    -webkit-transition: right 1s ease; 
    -moz-transition: right 1s ease; 
    -o-transition: right 1s ease; 
    -ms-transition: right 1s ease; 
    transition: right 1s ease; 

} 

// in your JS 
$('.background').css({right: '-2000px'}, function(){ 
     $($('nav a.active').attr('href')).css("display","none"); 
     $('nav a.active').removeClass('active'); 
     $('.photos').css("display","none"); 
     $(e.currentTarget).addClass('active'); 
     hash = $('nav a.active').prop("hash"); 
     target = document.getElementById(hash.slice(1)); 
     $('.background').animate({right: '0px'}, 1000, function(){ 
      $(target).fadeIn(300); 
      navFix(); 
     }); 
});