Question

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

我使用了jQuery和css关键帧并进行转换来制作动画。但是，它在Android设备上并不是很流畅，有时也在PC上。任何改进代码或做某事的建议。我见过其他示例网站，它们显示了非常流畅的类似转换示例。

这是我的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");
	}
}

Answer 1

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

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

然而，尽管如此，可能是你获得糟糕表现的最大原因是因为你的onScroll事件会经常触发。你需要对它们进行一些限制。

E.g。从这里：http://infoheap.com/javascript-onscroll-event-handler-throttling/

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

同样适用于onresize

jQuery动画不够流畅

1 个答案: