jQuery 動畫不夠流暢

Question

這是我開發的網站的鏈接。 www.sqwalla.com

我已經使用 jQuery 和 css 關鍵幀和轉換來制作動畫。 然而，它在安卓設備上不是很流暢，有時在電腦上也是如此。 任何改進代碼或做某事的建議。 我看過其他示例站點，它們顯示了非常平滑的類似轉換示例。

這是我的 jquery 內容。 我在 html 文件的 body 末尾添加了 script 標簽。

此外，在編碼時要記住的關於更流暢的 css/jQuery 動畫的任何一般建議？？？？

 $("#welcome h3").fadeIn(4000); // deal with the page getting resized or scrolled window.onscroll = function() {updateEffect()}; window.onresize = function() {updateEffect()}; function updateEffect() { // add your code to update the position when your browser // is resized or scrolled titleEffect(); slideUpShow("#image1 img"); slideUpShow("#image2 img"); slideLeftShow("#image1 div"); slideLeftShow("#image2 div"); slideRightShow("#social-links-div p:nth-child(1)"); slideLeftShow("#social-links-div p:nth-child(2)"); slideRightShow( "#social-links-div p:nth-child(3)"); minimizeShow(".video-div"); } function titleEffect(){ for(var x=0; x<($("#welcome").height()/3*2);x+=25){ if(document.body.scrollTop > x || document.documentElement.scrollTop > x){ $("#welcome h1").css('margin-top', x/5*3); } } } function getPosition(content){ var x = $(content).position().top; return x; } function slideUpShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideUpIn"); } else { $(id).removeClass("slideUpIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function slideLeftShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideLeftIn"); } else { $(id).removeClass("slideLeftIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function slideRightShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideRightIn"); } else { $(id).removeClass("slideRightIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function minimizeShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("zoomOut"); $(id).addClass("zoomIn"); } else { $(id).removeClass("zoomIn"); $(id).addClass("zoomOut"); } }

Answer 1

不要使用 jQuery。 它不擅長動畫，因為它是一個臃腫的庫。

使用專為該任務設計的庫，例如 kute.js

但是，話雖如此，您性能不佳的最大原因可能是因為您的 onScroll 事件觸發過於頻繁。 你需要對它們進行一些限制。

例如從這里： http : //infoheap.com/javascript-onscroll-event-handler-throttling/

$(window).scroll( $.throttle( 250, updateEffect ) );

同樣適用於 onresize