C3+jQuery는 애니메이션 효과와 콜백 함수를 생성합니다.

이번에는 애니메이션 효과와 콜백 함수를 만드는 C3+jQuery를 소개하겠습니다. C3+jQuery에서 애니메이션 효과와 콜백 함수를 만드는 주의사항은 무엇인가요?

최종 프로젝트에서는 친구가 제안한 아이디어를 작성했습니다. 사용자가 로그인에 성공하면 사용자를 환영하는 특수 효과가 있습니다. 즉, 환영 사용자 정보가 페이지 아래로 올라옵니다. 그런 다음 바닥으로 돌아갑니다.

그가 직면한 문제는 다음과 같습니다. 프롬프트 정보는 맨 아래에서 나올 수 있지만 나온 후에는 내려갈 수 없습니다.

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

Rendering:

코드는 다음과 같습니다.

nbsp;html>

	
		<meta>
		<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>
	
	
		<p>
			</p><p>欢迎xxx登录，祝您购物愉快</p>
				
		<script></script>
		<script>
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});			
			 	});
			}
		</script>
	

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

회전판 광고 이미지를 구현하는 HTML+CSS+jQuery

JS로 위치 지정 탐색 표시줄 구현

jquery로 페이징 효과를 만드는 방법

위 내용은 C3+jQuery는 애니메이션 효과와 콜백 함수를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!