บทที่ 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>