ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 5 jQuery Effects ตอนที่ 1 (hide/show and slide)
   jQuery Effects คือเอฟเฟคต่างๆของ jQuery ซึ่งใช้เพื่อเพิ่มเติมลูกเล่นต่างๆให้กับหน้าเว็บ นอกจากนี้แล้ว ยังสามารถสร้าง animations ได้อีกด้วย เช่น Hide (ซ่อน), Show()แสดง, Toggle(สลับ), Slide(เลื่อน), Fade(จาง), Animate(เคลื่อนไหว) เป็นต้น
   มี syntax ดังนี้
 $(selector).Effect (speed,callback);  ***speed(ความเร็ว)  อาจกำหนดเป็น slow, fast, normal หรือกำหนดเป็นมิลลิวินาทีก็ได้
       callback คือ function ที่ถูกเรียกใช้งานเมื่อ animated complete ใช้เมื่อเราต้องการให้ jQuery ทำคำสั่งแรกจนเสร็จก่อน แล้วจึงค่อยเริ่มทำคำสั่งที่สอง

Effect                         
คำอธิบาย
$(selector).hide() ซ่อนอีลิเมนต์

$(selector).show()

แสดงอิลิเมนต์

$(selector).toggle()

สลับระหว่างการซ่อนกับการแสดงอิลิเมนต์

$(selector).slideDown()

เลื่อนอิลิเมนต์จากบนลงล่าง(แสดง)

$(selector).slideUp()

เลื่อนอิลิเมนต์จากล่างขึ้นบน(ซ่อน)

$(selector).slideToggle()

สลับระหว่างการเลื่อนลงกับการเลื่อนขึ้น

$(selector).fadeIn()

แสดงอิลิเมนต์จากจางไปเข้ม

$(selector).fadeOut()

ซ่อนอิลิเมนต์จากเข้มไปจาง

$(selector).fadeTo()

ปรับความเข้มของอิลิเมนต์

$(selector).animate()

สร้างeffectเอง


1.ตัวอย่างการใช้ Hide/show  

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p><b>สวัสดีคุณผู้อ่าน<b></p>
<p>ลองคลิกที่ปุ่ม ซ่อน ซิ แล้วฉันจะหายไปทันที </p>
<button id="hide">ซ่อน</button>
<button id="show">แสดง</button>
</body>
</html>


คลิกดูตัวอย่าง hide/show

2.ตัวอย่างการใช้ toggle

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<button>สลับ</button>
<p>คลิกครั้งแรก เพื่อทดลองซ่อนฉันไม่ให้ใครเห็น</p>
<p>คลิกครั้งที่สองถ้าอยากให้ฉันกลับมา</p>
</body>
</html>

คลิกดูตัวอย่าง toggle

3.ตัวอย่างการใช้ slideDown

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
    $(this).slideDown();
  
  });
});
</script>
</head>
<body>
<p>คลิกซิจ๊ะ แล้วฉันจะสไลด์ให้ดู</p>
<p>คลิกซิ จะสไลด์อีกที</p>
<p>คลิกต่อ สไลด์อีกทีแล้วกัน</p>
</body>
</html>

คลิกดูตัวอย่าง slideDown

4.ตัวอย่างการใช้ slideUp

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideUp('slow');  
  });
});
</script>
</head>
<body>
<p align=center>คลิกซิจ๊ะ แล้วฉันจะสไลด์ให้ดู</center></p>
<p align=center>คลิกซิจะสไลด์อีกที</center></p>
<p align=center>คลิกต่อสไลด์อีกทีแล้วกัน</center></p>
</body>
</html>

คลิกดูตัวอย่าง slideUp

5.ตัวอย่างการใช้ slideToggle

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<button>สลับ</button>
<p>คลิกครั้งแรก เพื่อดูการเลื่อนขึ้นของฉัน</p>
<p>คลิกครั้งที่สอง ถ้าอยากให้ฉันเลื่อนลงมา</p>
</body>
</html>

คลิกดูตัวอย่าง slideToggle


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - เมื่อมีการคืนเงินระบบบังคับคิดภาษีแยกนอกครับ [2018-06][013]
โดย Rujikon จ 25 มิ.ย. 2018 5:10 pm บอร์ด Hachanna - Testter
0
1
จ 25 มิ.ย. 2018 5:10 pm โดย Rujikon
การใช้ and ใน where ในกรณีมี 2 เงื่อนไข
โดย Parichat จ 25 มิ.ย. 2018 12:34 pm บอร์ด Joomla Developing Knowledge
0
8
จ 25 มิ.ย. 2018 12:34 pm โดย Parichat
งานประจำวันที่ 25 มิถุนายน 2561
โดย taemmynatchapon จ 25 มิ.ย. 2018 10:27 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
4
จ 25 มิ.ย. 2018 10:27 am โดย taemmynatchapon
งานประจำวันที่ 25 มิถุนายน 2561
โดย Rujikon จ 25 มิ.ย. 2018 10:15 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
6
จ 25 มิ.ย. 2018 6:21 pm โดย Rujikon
งานประจำวันที่ 25 มิถุนายน 2561
โดย wilawan จ 25 มิ.ย. 2018 9:39 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
9
จ 25 มิ.ย. 2018 2:10 pm โดย wilawan
งานประจำวันที่ 25 มิถุนายน 2561
โดย Parichat จ 25 มิ.ย. 2018 9:31 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
3
จ 25 มิ.ย. 2018 9:31 am โดย Parichat
สรุปงานalloy
โดย taemmynatchapon อ 24 มิ.ย. 2018 5:38 pm บอร์ด M063 - ณัชพล ชัยวุฒิ
3
14
จ 25 มิ.ย. 2018 10:51 am โดย taemmynatchapon
B - com_MJUpgrade ไม่สามารถติดตั้งได้ใน Joomla เวอร์ชัน 3.x
โดย Parichat ส 23 มิ.ย. 2018 5:27 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 23 มิ.ย. 2018 5:27 pm โดย Parichat
B - ไม่สามารถ Copy สินค้าได้ [2018-05][030]
โดย Rujikon ส 23 มิ.ย. 2018 4:52 pm บอร์ด Hachanna - Testter
1
11
จ 25 มิ.ย. 2018 2:28 pm โดย Rujikon
การดูคำสั่ง sql ใน joomla
โดย Parichat ส 23 มิ.ย. 2018 3:31 pm บอร์ด Joomla Developing Knowledge
0
23
ส 23 มิ.ย. 2018 3:31 pm โดย Parichat
ปัญหา key ข้อมูลแล้ว error
โดย wilawan ส 23 มิ.ย. 2018 1:35 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
8
ส 23 มิ.ย. 2018 1:58 pm โดย mindphp
Alloy - Product ที่ยังไม่มีในระบบ
โดย wilawan ส 23 มิ.ย. 2018 12:18 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
5
ส 23 มิ.ย. 2018 12:18 pm โดย wilawan
ตรวจสอบ BPMN Zenith Workflow
โดย wilawan ส 23 มิ.ย. 2018 11:52 am บอร์ด Mindphp Task (ทดลองงาน)
0
3
ส 23 มิ.ย. 2018 11:52 am โดย wilawan
Google sheet ถ้าอยู่ที่ไฟล์ แล้วจะย้อนกลับมาหน้าแสดงรายละเอียดใน folder อย่างไร
โดย blackskulla ส 23 มิ.ย. 2018 11:10 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
37
ส 23 มิ.ย. 2018 11:14 am โดย thatsawan
ฺB - ไม่สามารถคืนสินค้าเข้าคลังของเสียหายได้ [2018-06][011]
โดย Rujikon ส 23 มิ.ย. 2018 11:10 am บอร์ด Hachanna - Testter
0
1
ส 23 มิ.ย. 2018 11:10 am โดย Rujikon
Q - ถ้ามีการให้ลูกค้ายืมสินค้าจะต้องดำเนินการอย่างไร [2018-06][012]
โดย Rujikon ส 23 มิ.ย. 2018 10:53 am บอร์ด Hachanna - Testter
0
4
ส 23 มิ.ย. 2018 10:53 am โดย Rujikon
B - เข้าดูข้อมูลการนัดคนเข้ามาสัมภาษณ์งานใน Application ไม่ได้
โดย watcharin ส 23 มิ.ย. 2018 10:25 am บอร์ด M.D.Soft Co.,Ltd. - Tester
1
2
ส 23 มิ.ย. 2018 10:29 am โดย watcharin
งานประจำวันที่ 23 มิถุนายน 2561
โดย Rujikon ส 23 มิ.ย. 2018 9:52 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
26
ส 23 มิ.ย. 2018 7:23 pm โดย Rujikon
งานประจำวันที่ 23 มิถุนายน 2561
โดย wilawan ส 23 มิ.ย. 2018 9:46 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
3
13
จ 25 มิ.ย. 2018 9:39 am โดย wilawan
งานประจำวันที่ 23 มิถุนายน 2561
โดย Parichat ส 23 มิ.ย. 2018 9:34 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
5
ส 23 มิ.ย. 2018 7:06 pm โดย Parichat