ให้เรตสมาชิก: 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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการนำชื่อข้อมูลในชื่อในฐานข้อมูล ในไฟล์ XML ของ module joomla
โดย jamepiyawat ส 18 ม.ค. 2020 6:44 pm บอร์ด Joomla Developing Knowledge
0
17
ส 18 ม.ค. 2020 6:44 pm โดย jamepiyawat
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb
โดย Ittichai_chupol ส 18 ม.ค. 2020 5:42 pm บอร์ด PHP Knowledge
0
11
ส 18 ม.ค. 2020 5:42 pm โดย Ittichai_chupol
Pillow library ปรับขนาดรูปเป็นเปอร์เซ็นเพื่อนำไปใช้งานได้สะดวก
โดย benzas00123 ส 18 ม.ค. 2020 5:25 pm บอร์ด Python Knowledge
0
6
ส 18 ม.ค. 2020 5:25 pm โดย benzas00123
Pillow library Optimize รูปภาพเพื่อให้มีขนาดของข้อมูลที่เล็กลง
โดย benzas00123 ส 18 ม.ค. 2020 2:53 pm บอร์ด Python Knowledge
0
14
ส 18 ม.ค. 2020 2:53 pm โดย benzas00123
ตัวช่วยในการคำนวณแคลอรี่สำหรับผู้ที่รักการออกกำลังกาย
โดย prmindphp ส 18 ม.ค. 2020 11:50 am บอร์ด MindPHP News & Feedback
0
27
ส 18 ม.ค. 2020 11:50 am โดย prmindphp
เราจะเก็บรูปข้อมูลของรูปลง database เราจะใช้ data type อะไรครับ
โดย benzas00123 ส 18 ม.ค. 2020 11:31 am บอร์ด SQL - Database
2
26
ส 18 ม.ค. 2020 1:17 pm โดย benzas00123
อยากทราบวิธีการแก้ไขปัญหาการ อัพโหลดไฟล์ excel แล้วไม่รองรับภาษาไทย
โดย Ittichai_chupol ศ 17 ม.ค. 2020 5:58 pm บอร์ด Programming - PHP
6
39
ส 18 ม.ค. 2020 6:25 pm โดย Ittichai_chupol
ต้องการนับจำนวนอักษรเเละตัดอักษรที่เกิน มีปัญหากับภาษาไทย
โดย thatsawan ศ 17 ม.ค. 2020 5:18 pm บอร์ด Programming - C/C++ & java & Python
0
11
ศ 17 ม.ค. 2020 5:18 pm โดย thatsawan
สอบถามครับ ลูปค่าออกมาแล้วต้องการให้มันเก็บค่าในตัวแปร ต้องทำยังไงครับ
โดย chatee supasand ศ 17 ม.ค. 2020 3:51 pm บอร์ด Programming - C/C++ & java & Python
3
34
ศ 17 ม.ค. 2020 5:19 pm โดย thatsawan
อยากทราบวิธีก่ารเปิด exe ใน ubutu เวอชั่น 14
โดย Ittichai_chupol ศ 17 ม.ค. 2020 2:33 pm บอร์ด Programming - PHP
2
33
ศ 17 ม.ค. 2020 4:14 pm โดย Ittichai_chupol
วิธีการสร้างระบบชำระเงินด้วย omise โดยใช้ php
โดย Ittichai_chupol พฤ 16 ม.ค. 2020 6:53 pm บอร์ด PHP Knowledge
0
39
พฤ 16 ม.ค. 2020 6:53 pm โดย Ittichai_chupol
Pillow library กับการ เปลี่ยนนามสกุล img ทีเดียวหลายๆ file
โดย benzas00123 พฤ 16 ม.ค. 2020 5:45 pm บอร์ด Python Knowledge
0
23
พฤ 16 ม.ค. 2020 5:45 pm โดย benzas00123
Pillow library ในการจัดการและประมวลผลรูปภาพ
โดย benzas00123 พฤ 16 ม.ค. 2020 5:04 pm บอร์ด Python Knowledge
0
35
พฤ 16 ม.ค. 2020 5:04 pm โดย benzas00123
ความแตกต่างระหว่าง visibility: hidden; กับ display: none;
โดย Ittichai_chupol พ 15 ม.ค. 2020 6:44 pm บอร์ด CSS Knowledge
0
69
พ 15 ม.ค. 2020 6:44 pm โดย Ittichai_chupol
ตัวอย่าง การ Query ข้อมูลทีเป็นที่ได้ผลการค้นหา
โดย mindphp พ 15 ม.ค. 2020 6:40 pm บอร์ด Programming - C/C++ & java & Python
0
33
พ 15 ม.ค. 2020 6:40 pm โดย mindphp
สอบถามครับ ทำไมสร้างตารางฐานข้อมูลแล้ว มันไม่ใน ใน pg
โดย chatee supasand พ 15 ม.ค. 2020 5:55 pm บอร์ด Programming - C/C++ & java & Python
4
38
พ 15 ม.ค. 2020 6:07 pm โดย thatsawan
ขอสอบถาม error ของ flask ครับ
โดย benzas00123 พ 15 ม.ค. 2020 10:44 am บอร์ด Programming - C/C++ & java & Python
4
41
พ 15 ม.ค. 2020 10:53 am โดย benzas00123
B - เปิดใบแจ้งหนี้ INVOICE(None Vat) ไม่ได้
โดย mindphp อ 14 ม.ค. 2020 7:35 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
อ 14 ม.ค. 2020 7:35 pm โดย mindphp
สอบถาม code ของ Flask หน่อยครับว่ามันเอาไว้ใช้ทำอะไร
โดย benzas00123 อ 14 ม.ค. 2020 4:50 pm บอร์ด Programming - C/C++ & java & Python
3
48
พ 15 ม.ค. 2020 5:54 am โดย mindphp
วิธีการเพิ่มส่วนการแสดงในหน้าสมัครสมาชิกของ เว็บบอร์ด phpbb
โดย Ittichai_chupol อ 14 ม.ค. 2020 3:19 pm บอร์ด PHP Knowledge
0
53
อ 14 ม.ค. 2020 3:19 pm โดย Ittichai_chupol