suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert den Animationseffekt, bei dem_jquery zuerst ausgeblendet und dann weggeklappt wird

jquery implementiert den Animationseffekt, bei dem_jquery zuerst ausgeblendet und dann weggeklappt wird

WBOY
WBOYOriginal
2016-05-16 15:46:391162Durchsuche

Das Beispiel in diesem Artikel beschreibt den Animationseffekt von jquery, der zuerst ausgeblendet und dann reduziert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JQuery wird hier verwendet, um den Animationseffekt zu erzielen, der zuerst ausgeblendet und dann gefaltet und verformt wird. Die Animation faltet und erweitert eine Ebene, wird zuerst ausgeblendet und ändert dann die Form des Div.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery先淡出再变形的动画</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").fadeOut();
 },function(){
  $(this).next("div.content").fadeIn();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">jQuery动画制作实例</h5>
 <div class="content">
  展示使用jQuery生成动画效果的一个小例子，让一个Div层先淡出然后再发生形变，最后折叠消失的特效代码。。</div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde_Javascript-KenntnisseNächster Artikel：Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen