jQuery 动画不够流畅

Question

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

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

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

此外，在编码时要牢记任何关于更流畅的 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

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

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

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

同样适用于onresize