애니메이션 효과 및 콜백 함수 구현 방법-JS 튜토리얼-php.cn

애니메이션 효과 및 콜백 함수 구현 방법

亚连

풀어 주다： 2018-06-15 11:37:15

원래의

2493명이 탐색했습니다.

이제 애니메이션 효과와 콜백 기능을 얻기 위해 jQuery와 결합된 CSS3를 사용하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

최종 프로젝트에는 친구가 제안한 아이디어, 사용자가 성공적으로 로그인했을 때 사용자를 환영하는 특수 효과, 즉 환영 사용자 정보가 맨 아래에서 페이지로 올라갔다가 다시 맨 아래.

그가 직면한 문제는 아래에서 프롬프트 메시지가 나올 수 있지만 나온 후에는 내려갈 수 없다는 것입니다.

듣고 생각해보니 이 버그를 해결하기 위해 콜백 함수를 사용하는 방법이 생각났습니다. 그러다가 로그인에 성공하면 홈페이지에 들어가는 것을 시뮬레이션(즉, 페이지 새로 고침)하는데 환영 메시지가 나타났다가 사라지더군요. 이와 비슷한 애니메이션 효과를 작성했습니다. 참고용:

Rendering:

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢迎动画</title>
		<style>
		 	*{margin:0;padding:0;}
		 	p {
		 		margin:0 auto;
		 		width:100%;
		 		height:700px;
		 		overflow:hidden;
		 		position:relative;
		 	}			
		 	p {
				width:220px;
				height:40px;
				line-height:40px;
				text-align:center;
				display:block;color:#900;
				background:#ccc;
				position:absolute;
				bottom:-40px;
				left:500px;
		 	}
		</style>
	</head>
	<body>
		<p>
			<p>欢迎xxx登录，祝您购物愉快</p>
		</p>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});
			
			 	});
			}
		</script>
	</body>
</html>

로그인 후 복사

여기서는 CSS3의 animate animation 속성이 주로 사용되며, jQuery와 결합하여 시간과 방향을 구현합니다. 마지막으로 프롬프트 정보를 원래 위치로 되돌리도록 콜백 함수를 설정하면 됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.