jquery implementiert den Animationseffekt, bei dem_jquery zuerst ausgeblendet und dann weggeklappt wird-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:46:39

Original

1143 Leute haben es durchsucht

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>

Nach dem Login kopieren

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