平滑jQuery動畫

關於使用Rails 4構建的my website，我使用jQuery的animate函數。但是，它似乎並不流暢。在我的application.js，我的代碼是$(window).load下：平滑jQuery動畫

這裏是生命的塊的樣本：

$('.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。

來源

2014-01-07 sameetandpotatoes

想象一下，在新的位置每隔幾毫秒清除背景並重新繪製圖層的內容。隨着圖層尺寸變大，它變得更加資源密集。因此在瀏覽器上動畫大圖層非常繁重。我相信除非縮小圖層大小，否則無法讓它比現在更平滑。 – RaviH

不，這絕對有可能。我關閉了在.background元素上的CSS3轉換，並且突然間JS動畫非常流暢。什麼讓它不穩定不是瀏覽器的性能，這是CSS3的轉換和jQuery的animate（）之間的衝突。 – Dylan

問題是，你的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;

所以，任何時候你改變任何可以轉換您.background的CSS屬性，它會嘗試使用那轉換速度。不幸的是，CSS屬性right是一個可以轉換的屬性。所以當你用1000毫秒的持續時間爲你的背景設置動畫時，它會與你想要做的持續時間爲300毫秒的CSS戰鬥。

所以要麼使用過渡或jQuery動畫，但不能同時使用。

修復1.應該解決您的問題，給你的300ms的持續時間：

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

修復2.應該解決您的問題，給你1000毫秒的持續時間：

/* 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(); 
     }); 
});

來源

2014-01-07 03:17:57 Dylan

平滑jQuery動畫

回答

相關問題