jQuery 动画不够流畅答案

【问题标题】：jQuery animations are not smooth enoughjQuery 动画不够流畅
【发布时间】：2018-07-28 12:01:28
【问题描述】：

这是我开发的网站的链接。 www.sqwalla.com

我使用 jQuery 和 css 关键帧和变换来制作动画。然而，它在安卓设备上不是很流畅，有时在电脑上也是如此。任何改进代码或做某事的建议。我看过其他示例站点，其中显示了非常平滑的类似变换示例。

这是我的 jquery 内容。我在 html 文件的正文末尾添加了脚本标签。

另外，对于更流畅的 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");
	}
}

【问题讨论】：

没有你的 CSS 类，我们只能猜测（请将它们添加到问题中），但你应该（尽可能）依赖 transform 来制作动画，因为它可以被 GPU 加速并且需要浏览器进行的计算量大大减少。
这里有一个很好的来源paulirish.com/2012/…

标签： jquery html css animation smoothing

【解决方案1】：

不要使用 jQuery。它不擅长动画，因为它是一个臃肿的库。

使用专为任务设计的库，例如 kute.js

但是话虽如此，您性能不佳的最大原因可能是您的 onScroll 事件触发得太频繁了。您需要对它们进行一些限制。

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

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

同样适用于 onresize

【讨论】：