C3+jQuery erstellt Animationseffekte und Rückruffunktionen

Dieses Mal bringe ich Ihnen C3+jQuery zum Erstellen von Animationseffekten und Rückruffunktionen. Was sind die Vorsichtsmaßnahmen für C3+jQuery zum Erstellen von Animationseffekten und Rückruffunktionen? Werfen wir einen Blick auf praktische Fälle.

Im letzten Projekt habe ich eine von einem Freund vorgeschlagene Idee geschrieben. Wenn sich der Benutzer erfolgreich anmeldet, gibt es einen besonderen Effekt, um den Benutzer zu begrüßen steigt von unten zur Seite und kehrt dann nach unten zurück.

Das Problem, auf das er gestoßen ist, ist: Eine prompte Nachricht kann von unten herauskommen, aber wenn sie einmal herauskommt, kann sie nicht mehr nach unten gehen.

Nachdem ich das gehört hatte, dachte ich darüber nach und dachte darüber nach, eine Rückruffunktion zu verwenden, um diesen Fehler zu beheben. Dann simulierte ich das Aufrufen der Homepage (d. h. das Aktualisieren der Seite), wenn die Anmeldung erfolgreich war, die Willkommensnachricht angezeigt wurde verschwindet, und ich habe einen ähnlichen Animationseffekt geschrieben. Nur als Referenz:

Rendering:

Der Code lautet wie folgt :

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>
	

Hier verwenden wir hauptsächlich die Animationsanimationseigenschaft in CSS3 in Kombination mit jQuery, um die Zeit und Richtung der Animationsausführung zu erkennen, und legen schließlich die Rückruffunktion fest, um die Eingabeaufforderung zurückzugeben Informationen zur Ausgangsposition.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML+CSS+jQuery zur Implementierung von Karussell-Werbebildern

JS zur Implementierung der Positionierungsnavigationsleiste

So erstellen Sie einen Paging-Effekt mit jquery

Das obige ist der detaillierte Inhalt vonC3+jQuery erstellt Animationseffekte und Rückruffunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!