jQuery ผลลัพธ์

  • หน้าก่อน
  • หน้าต่อไป

jQuery สามารถสร้างอิสริยภาพที่ซ่อนไว้แสดง สลับ ย้ายตำแหน่ง และอนิมาชีวะที่สร้างขึ้นเองตามความต้องการเอง และอื่นๆ

ทดลองด้วยตัวเอง

ลองทดลองฟังก์ชัน jQuery นี้:

CodeW3C.com - ยูนิต์วิชาการเทคโนโลยีอินเทอร์เน็ตแห่งแรกของโลก

ใน CodeW3C.com คุณจะหาถึงทั้งหมดของตัวอย่างเรียนรู้เกี่ยวกับการสร้างเว็บไซต์

คลิกที่นี่

ตัวอย่าง

jQuery hide()
แสดงฟังก์ชัน jQuery hide() ที่เรียบง่าย
jQuery hide()
แสดง hide() อีกครั้ง วิธีซ่อนข้อความบางส่วน
jQuery slideToggle()
แสดงฟังก์ชัน slide panel ที่เรียบง่าย
jQuery fadeTo()
แสดงฟังก์ชัน jQuery fadeTo() ที่เรียบง่าย
jQuery animate()
แสดงฟังก์ชัน jQuery animate() ที่เรียบง่าย

jQuery ซ่อนและแสดง

ผ่านฟังก์ชัน hide() และ show() จะให้ jQuery สนับสนุนการซ่อนและแสดงอิเล็กทรอนิกส์ HTML

ตัวอย่าง

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

ทดลองด้วยตัวเอง

ฟังก์ชัน hide() และ show() สามารถตั้งค่าตัวแปรเลือกตั้งสองตัวคือ speed และ callback

ภาษาคำสั่ง

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed ตัวแปรกำหนดความเร็วที่แสดงหรือซ่อน สามารถตั้งค่าเป็น "slow", "fast", "normal" หรือ มิลลิเซ็กันด์

callback ตัวแปรคือชื่อฟังก์ชันที่จะทำงานหลังจากฟังก์ชัน hide หรือ show ทำงานเสร็จ คุณจะเรียนรู้เกี่ยวกับเนื้อหาดังกล่าวในบทเรียนต่อไป callback ความเข้าใจของพารามิเตอร์

ตัวอย่าง

$("button").click(function(){
$("p").hide(1000);
});

ทดลองด้วยตัวเอง

jQuery ฟังก์ชันเปลี่ยน

ฟังก์ชัน jQuery toggle() ใช้ฟังก์ชัน show() หรือ hide() ในการเปลี่ยนสถานะที่แสดงหรือซ่อนของอิเล็กทรอนิกส์ HTML

ซ่อนหรือแสดงอิเล็กทรอนิกส์ที่แสดงหรือซ่อนอยู่

ภาษาคำสั่ง

$(selector).toggle(speed,callback)

speed พารามิเตอร์สามารถตั้งค่าดังนี้: "slow", "fast", "normal" หรือ มิลลิเซ็กันด์。

ตัวอย่าง

$("button").click(function(){
$("p").toggle();
});

ทดลองด้วยตัวเอง

callback พารามิเตอร์คือชื่อฟังก์ชันที่จะทำงานหลังจากการทำงานของฟังก์ชันนี้เสร็จสิ้น。คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับเนื้อหานี้ในบทที่ต่อไปของคู่มือนี้ callback ความเข้าใจของพารามิเตอร์

jQuery ฟังก์ชันเลื่อนขึ้นและลง - slideDown, slideUp, slideToggle

jQuery มีฟังก์ชันเลื่อนขึ้นและลงตามตัวเลือกที่ระบุ

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed พารามิเตอร์สามารถตั้งค่าดังนี้: "slow", "fast", "normal" หรือ มิลลิเซ็กันด์。

callback พารามิเตอร์คือชื่อฟังก์ชันที่จะทำงานหลังจากการทำงานของฟังก์ชันนี้เสร็จสิ้น。คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับเนื้อหานี้ในบทที่ต่อไปของคู่มือนี้ callback ความเข้าใจของพารามิเตอร์

ตัวอย่างโดยตรงของ slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

ทดลองด้วยตัวเอง

ตัวอย่างโดยตรงของ slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
});

ทดลองด้วยตัวเอง

ตัวอย่างโดยตรงของ slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

ทดลองด้วยตัวเอง

jQuery ฟังก์ชัน Fade - fadeIn(), fadeOut(), fadeTo()

jQuery มีฟังก์ชัน fade ดังนี้:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed พารามิเตอร์สามารถตั้งค่าดังนี้: "slow", "fast", "normal" หรือ มิลลิเซ็กันด์。

พารามิเตอร์ในฟังก์ชัน fadeTo() opacity พารามิเตอร์กำหนดให้ลดลงเป็นความมัวแปรที่กำหนด

callback พารามิเตอร์คือชื่อฟังก์ชันที่จะทำงานหลังจากการทำงานของฟังก์ชันนี้เสร็จสิ้น。คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับเนื้อหานี้ในบทที่ต่อไปของคู่มือนี้ callback ความเข้าใจของพารามิเตอร์

ตัวอย่างโดยตรงของ fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

ทดลองด้วยตัวเอง

ตัวอย่างโดยตรงของ fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

ทดลองด้วยตัวเอง

jQuery แอนิเมชันที่กำหนดเอง

สัญลักษณ์การใช้งาน jQuery ที่สร้างแอนิเมชันที่กำหนดเอง:

$(selector).animate({params},[duration],[easing],[callback])

ค่าที่สำคัญที่สุดคือ params。มันกำหนดคุณสมบัติ CSS ที่ใช้ในแอนิเมชัน。สามารถตั้งค่าคุณสมบัติมากกว่าหนึ่งต่อครั้งได้:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

ค่าที่ใช้กำหนดเป็นพารามิเตอร์ที่สอง duration。มันกำหนดระยะเวลาที่ใช้ในแอนิเมชัน。ค่าที่ตั้งค่าคือ: "slow", "fast", "normal" หรือ มิลลิเซ็กันด์。

ตัวอย่าง 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

ทดลองด้วยตัวเอง

ตัวอย่าง HTML โดยมาตรฐานคือการตั้งตำแหน่งที่เป็นตำแหน่งสถานีตั้งแต่เอง และไม่สามารถเคลื่อนไหวได้

ถ้าคุณต้องการให้ตัวอย่างสามารถเคลื่อนไหวได้ โปรดตั้งค่า CSS ของ position ให้เป็น relative หรือ absolute。

jQuery ฟีเจอร์ - จากหน้านี้

ฟังก์ชัน คำอธิบาย
$(selector).hide() ซ่อนตัวเลือกที่ถูกเลือก
$(selector).show() แสดงตัวเลือกที่ถูกเลือก
$(selector).toggle() เปลี่ยนรูปแบบ (ซ่อนและแสดง) ของตัวเลือกที่ถูกเลือก
$(selector).slideDown() ทำให้ตัวเลือกที่ถูกเลือกเคลื่อนตัวลงและแสดง
$(selector).slideUp() ทำให้ตัวเลือกที่ถูกเลือกเคลื่อนตัวขึ้นและซ่อน
$(selector).slideToggle() ทำให้ตัวเลือกที่ถูกเลือกเคลื่อนตัวขึ้นและลง
$(selector).fadeIn() ทำให้ตัวเลือกที่ถูกเลือกมีสีเงาเข้ามา
$(selector).fadeOut() ทำให้ตัวเลือกที่ถูกเลือกมีสีเงาตาย
$(selector).fadeTo() ทำให้ตัวเลือกที่ถูกเลือกมีสีเงาตายทั้งหมดตามความโปร่งใสที่กำหนด
$(selector).animate() ปฏิบัติการแอนิเมชันที่กำหนดโดยตัวเลือกที่ถูกเลือก

ถ้าคุณต้องการคู่มือเต็ม โปรดเข้าชม คู่มือ jQuery Effect。

  • หน้าก่อน
  • หน้าต่อไป