Rumah > Artikel > hujung hadapan web > jquery melaksanakan kesan animasi yang pertama pudar dan kemudian lipat away_jquery

jquery melaksanakan kesan animasi yang pertama pudar dan kemudian lipat away_jquery

WBOYasal: 2016-05-16 15:46:391145semak imbas

Contoh dalam artikel ini menerangkan kesan animasi jquery yang mula-mula pudar dan kemudian runtuh. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Jquery digunakan di sini untuk mencapai kesan animasi yang mula pudar dan kemudian lipatan dan ubah bentuk, mula-mula pudar, dan kemudian Div berubah bentuk secara keseluruhannya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Javascript menyedari kesan menukar kandungan yang sepadan di bawah selepas tetikus diletakkan_javascript kemahiranArtikel seterusnya：Javascript menyedari kesan menukar kandungan yang sepadan di bawah selepas tetikus diletakkan_javascript kemahiran

Artikel berkaitan

Lihat lagi