屏幕上沒有延遲的動畫對象

我一直在使用Animate.CSS和基本的Jquery來在屏幕上和屏幕外動畫元素。問題在於，由於背景幻燈片與屏幕動畫同時發生，這導致了很多延遲。我一直在尋找替代方法來幫助解決這個問題。屏幕上沒有延遲的動畫對象

我已閱讀使用不透明度和TranslateZ等有元素進入和脫離頁面。

什麼是最好的方式來改變我的代碼在動畫過程中可能滯後較少？

//Screen 7 Start 
//Highest Planned College 
$("#screen7").hide() 

$(".buttonsQuestion7").click(function() { 
$('#screen7').addClass('animated slideOutUp'); 
$('#screen7').fadeOut() 
$("#screen8").show() 
$("#screen8").addClass('animated slideInUp'); 


});

來源

2017-01-25 AndrewLeonardi

具有許多屏幕上的元素與部分不透明度和RGBA顏色將降低您的性能像鉛氣球。不要添加斧頭不透明度，使用可視性：隱藏或顯示：無，並且啞視「透明度」 – dandavis

謝謝！讓我給這個鏡頭 – AndrewLeonardi

我也有jQuery動畫的滯後問題。這個問題正躺在彼此喜歡你之後有幾個動畫有：

$('#screen7').fadeOut(); 
$("#screen8").show();

什麼固定對我來說是調用第二動畫中的第一個像這樣的回調：

$('#screen7').effect('fadeOut', { 
    direction: 'left', 
    mode: 'hide', 
    duration: '300', 
    complete: function(){ 

     $('#screen8').show(); 
    } 
});

在這種情況下，我使用的jQuery UI的.effect()但.fadeOut()具有相同的complete回調選項

http://api.jquery.com/fadeout/

希望可以幫助

來源

2017-01-25 14:14:56 Mawcel

讓我給這個鏡頭！ – AndrewLeonardi

屏幕上沒有延遲的動畫對象

回答

相關問題