มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3
เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdeeeffect jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ effect jquery
ไปที่
Copy
การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
โค้ดประกอบด้านบน
<script language="javascript">
$(function(){
$("p").fadeIn(); // แสดงแท็ก p ที่ซ่อนอยู่แบบค่อยๆ แสดงชัดขึ้น
$("p").fadeOut(); // ซ่อนแท็ก p แบบค่อยๆ จางหายไป
// นอกจากนี้เรายังสามารถกำหนดความเร็วของ effects
// ได้อีก 3 ระดับ คือ
$("p").fadeIn("slow"); // แสดงข้อมูลแบบช้า
$("p").fadeIn("normal"); // แสดงข้อมูลแบบปกติ
$("p").fadeIn("fast"); // แสดงข้อมูลแบบเร็ว
// ซึ่งความเร็วทั้ง 3 ระดับนั้นสามารถใช้กับซ่อน
// ข้อมูลได้เช่น โดยเปลี่ยนจาก fadeIn เป็น fadeOut
});
</script>
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไปโค้ดประกอบด้านบน
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="javascript">
$(function(){
$("a#demo").click(function(){
$("div#show_demo").fadeIn("slow");
return false;
});
$("a#demo2").click(function(){
$("div#show_demo").fadeOut("slow");
return false;
});
});
</script>
<style type="text/css">
#show_demo{
width:120px;height:150px;
border:1px solid #cccccc;
background-color:#999999;
display:none;
padding:5px;
overflow:hidden;
}
</style>
</head>
<body>
<br />
<a href="javascript:void(0)" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น</a><br />
<div id="show_demo">
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
</div>
<a href="javascript:void(0)" id="demo2">คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไป</a><br />
</body>
</html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
25 Sep2008รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 11,958
สมมติ xxx คือแท็กที่เราต้องการ myclass คือคลาสที่เรามีและได้กำหนดไว้แล้ว
เนื้อหาที่เกี่ยวข้อง
-
25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 23,344
การซ่อนและแสดงข้อมูลในลํกษณะปกติ <script language="javascript">
-
25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 2 อ่าน 11,321
การซ่อนและแสดงข้อมูลในลํกษณะไสลด์เลื่อนขึ้นหรือเลื่อนลง <script langua
-
กำลังอ่านเนื้อหานี้อยู่25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 14,032
การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป <script
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Privacy Policy
Author Ninenik Narkdee
2023 © Copyright ninenik.com. All rights reserved.