Rumah > Artikel > hujung hadapan web > Gunakan JQ untuk menulis kesan fade-in dan fade-out paling asas dengan animation_jquery demonstrasi

Gunakan JQ untuk menulis kesan fade-in dan fade-out paling asas dengan animation_jquery demonstrasi

WBOYasal: 2016-05-16 16:32:271177semak imbas

jQuery ialah perpustakaan JavaScript, yang merupakan lanjutan daripada JavaScript, digunakan untuk memenuhi keperluan yang semakin meningkat untuk kesan khas yang berbeza. Intipatinya ialah JavaScript

Mari kita tulis program JQ asas untuk menggambarkan JQ.

1. Matlamat asas

Terdapat tiga butang berikut pada halaman web Satu hanya boleh menyembunyikan teks, satu hanya boleh memaparkan teks, dan satu boleh menyembunyikan dan memaparkan teks pada masa yang sama Klik sekali untuk memaparkan, klik sekali lagi untuk menyembunyikan, dan kitaran tidak berkesudahan.

2. Proses pengeluaran

1. Pertama, anda perlu memuat turun fail sokongan JQ dari tapak web rasmi JQ dan memasukkannya ke dalam folder tapak anda. Fail sokongan ini ialah jQuery1.11 Anda boleh pergi ke tapak web rasmi jQuery untuk memuat turun jQuery1.11 yang serasi dengan pelayar lama IE6, tetapi bukan jQuery2 yang tidak serasi dengan pelayar lama IE6.

2. Keseluruhan kod halaman web adalah seperti berikut, dibahagikan kepada serpihan untuk penjelasan:

<!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" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)651b8a06c42537caa41315f6ad993dcb

<head>部分主要是实现核心代码部分，放在后面来讲，先说<body>部分

<body> 
<!--这是定义一段ID为text的文本，便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

(2)a801d9c20ab268ecdf000c4cd37b7338 bahagian

<head> 
<!--网页的编码，声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数，缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用，之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>

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：Navigasi ditetapkan di bahagian atas berdasarkan jquery bertindak balas kepada bar skrol penyemak imbas events_jqueryArtikel seterusnya：Navigasi ditetapkan di bahagian atas berdasarkan jquery bertindak balas kepada bar skrol penyemak imbas events_jquery

Artikel berkaitan

Lihat lagi