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

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

บทที่ 5 jQuery Effect ตอนที่ 5 (Fade)
   Fade แปลว่าเลือนลาง
   Fade เป็นเมธอดของ jQuery ที่ใช้เพื่อทำให้ object ต่างๆที่เราสร้างขึ้นเลือนลาง หรืออาจใช้เพื่อให้ทำให้ object ที่เลือนลางอยู่แล้วชัดเจนขึ้น
   fade method นั้นแบ่งเป็น 4 แบบดังนี้

fade Method
      คำอธิบาย
fadeIn()             จากที่เลือนลาง ก็ทำให้ชัดเจน

fadeOut()       จากที่ชัดเจน ก็ทำให้เลือนลาง

fadeToggle()       สลับไปมา ระหว่างเลือนลาง กับชัดเจน

fadeTo()       เป็นคำสั่งที่ช่วยกำหนดระดับความเลือนลาง ซึ่งค่าที่ใช้กำหนดจะอยู่ในช่วง 0-1 (ถ้าใกล้ 0 หรือเป็น 0 แปลว่าเลือนลางมากสุด มองไม่เห็นเลย ,แต่ถ้าใกล้ 1 จะยิ่งชัดเจน หรือถ้าเป็น 1 คือชัดที่สุด )


1. fadeIn() method
มี syntax ดังนี้
$(selector).fadeIn(speed,callback);ตัวอย่างเช่น

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn(5000);
    $("#div2").fadeIn();
    $("#div3").fadeIn("slow");
  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeIn method</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

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

2. fadeOut() method

มี syntax ดังนี้
$(selector).fadeOut(speed,callback);ตัวอย่างเช่น

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

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

***เปรียบเทียบระหว่าง fadeIn กับ fadeOut จะเห็นว่าทั้งสองตัวอย่างนี้ นอกจากจะแตกต่างที่ตัว syntax แล้ว ยังมีตัวคำสั่งที่อยู่ภายในแท็ก <div> ที่แตกต่างกันด้วย นั้นคือคำสั่ง display:none ซึ่งมีอยู่ใน fadeIn method แต่ไม่มีใน fadeOut method   ตัวคำสั่ง display:none เป็นคำสั่งที่สั่งไม่มีการแสดง object     
    -ในตัวอย่างที่ 1 เราจะเห็นว่าในตอนแรกไม่มี object ปรากฎ เนื่องจากคำสั่ง display:none และเมื่อมีการคลิก object จึงปรากฎ
   -ในตัวอย่างที่ 2 เราจะเห็นว่าในตอนแรกมี object ปรากฎอยู่แล้ว เนื่องจากไม่มีคำสั่ง display:none และเมื่อมีการคลิก object จึงหายไป
(เเท็ก <div> คือแท็กที่ใช้ในการสร้าง object)

3. fadeToggle() Method

มี syntax ดังนี้
$(selector).fadeToggle(speed,callback);ตัวอย่างเช่น

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>


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

4. fadeTo() Method

มี syntax ดังนี้
$(selector).fadeTo(speed,opacity,callback);ตัวอย่างเช่น

<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",1);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.1);
  });
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่าง fadeTo method </p>
<button>Click to fade boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
โหลดตัว package_joomshopping_thaiedition ไม่ได้
โดย Mike Charoenthanang ส 24 ก.พ. 2018 4:58 pm บอร์ด Joomla Development
1
17
ส 24 ก.พ. 2018 6:30 pm โดย AePongsak
Q :ต้องการให้แผนที่เปลี่ยนตำแหน่งตามจังหวัดต้นทางและจังหวัดปลายทางที่ผู้ใช้เลือกใน listbox ใน joomla
โดย Parichat ศ 23 ก.พ. 2018 4:46 pm บอร์ด Joomla Development
0
11
ศ 23 ก.พ. 2018 4:46 pm โดย Parichat
การใช้งาน Python GUI (Tkinter) : การทำ ปุ่มกด Image
โดย Jom07 ศ 23 ก.พ. 2018 4:46 pm บอร์ด Python Knowledge
0
9
ศ 23 ก.พ. 2018 4:46 pm โดย Jom07
Responsive Post-it Note (เรสปอนซีฟโพสอิดโน๊ต)-Module สามารถจดบันทึกที่ต้องการได้ใน Joomla
โดย Parichat ศ 23 ก.พ. 2018 4:25 pm บอร์ด Joomla Extension Review
0
7
ศ 23 ก.พ. 2018 4:25 pm โดย Parichat
วิธีการเรียกใช้ function ที่อยู่ใน model ในส่วน view ใน Joomla
โดย Parichat ศ 23 ก.พ. 2018 2:54 pm บอร์ด Joomla Developing Knowledge
0
17
ศ 23 ก.พ. 2018 2:54 pm โดย Parichat
การติดตั้ง pyinstaller บนคอมพิวเตอร์สำหรับคอมไฟล์ Python GUI (Tkinter) เป็น .exe
โดย Jom07 ศ 23 ก.พ. 2018 2:21 pm บอร์ด Python Knowledge
0
10
ศ 23 ก.พ. 2018 2:21 pm โดย Jom07
ขอ 3 คำให้กับครูคนนี้
โดย Before Dong ศ 23 ก.พ. 2018 11:00 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
99
ศ 23 ก.พ. 2018 11:00 am โดย Before Dong
การอ่านค่าจาก URL หรือค่า GET ใน Joomla
โดย Parichat พฤ 22 ก.พ. 2018 11:12 pm บอร์ด Joomla Developing Knowledge
0
19
พฤ 22 ก.พ. 2018 11:12 pm โดย Parichat
การใช้งาน Python GUI (Tkinter) : การ Image (การเปิดภาพ)
โดย Jom07 พฤ 22 ก.พ. 2018 6:17 pm บอร์ด Python Knowledge
0
17
พฤ 22 ก.พ. 2018 6:17 pm โดย Jom07
การใช้งาน Python GUI (Tkinter) : การ Browse file (การค้นหาไฟล์)
โดย Jom07 พฤ 22 ก.พ. 2018 5:16 pm บอร์ด Python Knowledge
0
23
พฤ 22 ก.พ. 2018 5:16 pm โดย Jom07
Liverpool เจ้ายุโรป 5 สมัย
โดย Before Dong พฤ 22 ก.พ. 2018 11:14 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
44
พฤ 22 ก.พ. 2018 11:14 am โดย Before Dong
การใช้งาน Python GUI (Tkinter) :Label widget (วิดเจ็ตป้ายกำกับ)
โดย Jom07 พ 21 ก.พ. 2018 5:36 pm บอร์ด Python Knowledge
0
27
พ 21 ก.พ. 2018 5:36 pm โดย Jom07
รูปแบบการดึงข้อมูลจากฐานข้อมูลใน Joomla
โดย Parichat พ 21 ก.พ. 2018 5:25 pm บอร์ด Joomla Developing Knowledge
0
21
พ 21 ก.พ. 2018 5:25 pm โดย Parichat
การใช้ปุ่ม Button ชนิดต่างๆ ใน Python GUI (Tkinter)
โดย Jom07 พ 21 ก.พ. 2018 5:07 pm บอร์ด Python Knowledge
0
29
พ 21 ก.พ. 2018 5:07 pm โดย Jom07
Slideshow CK (สไลด์โชว์ ซีเค)-Module ที่สามารถแสดงรูปภาพและวีดีโอที่มีลิ้งที่มีลักษณะพิเศษได้
โดย Parichat พ 21 ก.พ. 2018 4:11 pm บอร์ด Joomla Extension Review
0
26
พ 21 ก.พ. 2018 4:11 pm โดย Parichat
มีใครใช้ Zoho Creator ทำแอพมั้ยคะ ช่วยด้วยค่ะ
โดย 156595465 พ 21 ก.พ. 2018 3:14 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
30
พ 21 ก.พ. 2018 3:14 pm โดย 156595465
วิวัฒนาการของการเก็บข้อมูล
โดย Before Dong พ 21 ก.พ. 2018 10:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
210
พ 21 ก.พ. 2018 10:42 am โดย Before Dong
มีใครใช้ Zoho Creator เขียนแอพตัวเองมั้ยคะ
โดย 156595465 พ 21 ก.พ. 2018 6:25 am บอร์ด Mobile Programming - Android, iOS, Window Phone
0
29
พ 21 ก.พ. 2018 6:25 am โดย 156595465
Q :ต้องการบันทึกข้อมูลการคำนวนระยะทางตอนที่ผู้ใช้งานค้นหาจากจังหวัดต้นทางและจังหวัดปลายทาง ใน Joomla
โดย Parichat อ 20 ก.พ. 2018 6:43 pm บอร์ด Joomla Development
2
42
พฤ 22 ก.พ. 2018 11:00 pm โดย Parichat
Modals (โม'เดิล)-Plugin ที่ทำให้เชื่อมโยงที่เปิดในป็อปอัพโมเดิล
โดย Parichat อ 20 ก.พ. 2018 6:20 pm บอร์ด Joomla Extension Review
0
34
อ 20 ก.พ. 2018 6:20 pm โดย Parichat