JQuery เราจะใช้เอฟเฟกต์ไดนามิกกับ JQuery ได้อย่างไร

ด้วย JQuery คุณสามารถสร้างเอฟเฟกต์ไดนามิก แอนิเมชัน และเฟดโดยดำเนินการกับองค์ประกอบของหน้า HTML

ในบทความนี้เราจะดูวิธีการใช้ JQuery วิธีต่างๆ ในการสร้างภาพเคลื่อนไหว

ซ่อนและแสดงองค์ประกอบ HTML

Metodi hide() และ show()

วิธีการซ่อน () เพียงแค่ตั้งค่าสไตล์อินไลน์ display: none สำหรับรายการที่เลือก ในทางกลับกัน เมธอด show() จะคืนค่าคุณสมบัติการแสดงผล 

ลองดูตัวอย่าง:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

ในกรณีแรก ย่อหน้าจะถูกซ่อนเมื่อคุณคลิกที่ปุ่ม (hide-btn) ในกรณีที่สอง ย่อหน้าจะปรากฏขึ้นเมื่อคุณคลิกที่ปุ่ม (show-btn).

คุณยังสามารถระบุพารามิเตอร์ระยะเวลา เพื่อทำให้การแสดงและซ่อนเอฟเฟกต์เคลื่อนไหวในช่วงเวลาหนึ่งได้

สามารถระบุระยะเวลาได้โดยใช้หนึ่งในสตริงก่อนหน้าdefiNite 'slow' o 'fast'หรือเป็นมิลลิวินาที เพื่อความแม่นยำยิ่งขึ้น ค่าที่สูงขึ้นหมายถึงภาพเคลื่อนไหวที่ช้าลง

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

สตริงก่อนdefinita 'fast' ระบุระยะเวลา 200 มิลลิวินาที ในขณะที่สตริง 'slow' ระบุระยะเวลา 600 มิลลิวินาที

เราสามารถระบุฟังก์ชันของ callback ที่จะดำเนินการหลังจากเสร็จสิ้นวิธีการ show() หรือ hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

วิธีการสลับ

วิธีการ jQuery toggle() แสดงหรือซ่อนรายการในลักษณะที่หากแสดงรายการในตอนแรก รายการนั้นจะถูกซ่อนไว้ ในทางกลับกัน หากซ่อนไว้ จะแสดง (สลับการมองเห็น)

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

ในทำนองเดียวกัน คุณสามารถระบุพารามิเตอร์ duration สำหรับวิธีการ toggle()ในลักษณะที่ทำให้การเปลี่ยนผ่านระหว่างมองเห็นและซ่อนเร้นเคลื่อนไหวได้ เช่น เมธอด show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

ในทำนองเดียวกัน คุณยังสามารถระบุฟังก์ชันของ callback สำหรับวิธีการ toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

เอฟเฟ็กต์การจางหายไปของ jQuery

Metodi fadeIn() e fadeOut()

คุณสามารถใช้วิธี jQuery fadeIn()e fadeOut() เพื่อแสดงหรือซ่อนองค์ประกอบ HTML ค่อยๆ เพิ่มหรือลดความทึบขององค์ประกอบและสร้างเอฟเฟกต์สีซีดจาง

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

เช่นเดียวกับเมธอดเอฟเฟกต์ jQuery อื่นๆ คุณสามารถเลือกกำหนดพารามิเตอร์ระยะเวลาหรือความเร็วสำหรับเมธอดได้ fadeIn()e fadeOut()เพื่อควบคุมระยะเวลาการจางลง สามารถระบุระยะเวลาได้โดยใช้หนึ่งในสตริงก่อนหน้าdefiNite 'slow' o 'fast'หรือเป็นหน่วยมิลลิวินาที ค่าที่สูงขึ้นหมายถึงภาพเคลื่อนไหวที่ช้าลง

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

ผลของวิธีการ fadeIn() / fadeOut() è คล้าย a show() / hide()แต่ไม่เหมือนกับวิธีการ show() / hide()แบบแรกทำให้เคลื่อนไหวเฉพาะความโปร่งแสงขององค์ประกอบเป้าหมายเท่านั้น และไม่ทำให้ขนาดเคลื่อนไหว

นอกจากนี้ คุณสามารถระบุฟังก์ชันของ callback เพื่อเรียกใช้หลังจากเมธอดเสร็จสิ้น fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

วิธี fadeToggle()

วิธีการ jQuery fadeToggle() แสดงหรือซ่อนองค์ประกอบที่เลือกโดยเคลื่อนไหวความทึบขององค์ประกอบนั้น หากองค์ประกอบถูกแสดงในตอนแรก องค์ประกอบนั้นจะถูกทำให้จางลง หากถูกซ่อนไว้ ก็จะจางหายไป (เช่น สลับเอฟเฟกต์จาง)

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

คุณยังสามารถระบุพารามิเตอร์อายุการใช้งานสำหรับวิธีการ fadeToggle() สำหรับวิธีการ fadeIn() / fadeOut()เพื่อควบคุมระยะเวลาหรือความเร็วของภาพเคลื่อนไหวที่จางหาย

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

เมธอด fadeToggle() ยังมีความสามารถในการระบุฟังก์ชัน callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

วิธี fadeTo()

วิธีการ jQuery fadeTo() มันคล้ายกับวิธีการ fadeIn()แต่ไม่เหมือนกับวิธีการ fadeIn(), วิธีการ fadeTo() ให้คุณผสมผสานองค์ประกอบต่างๆ ลงไปที่ระดับความทึบแสง

$(selector).fadeTo(speed, opacity, callback);

พารามิเตอร์ที่จำเป็น opacity ระบุความทึบสุดท้ายขององค์ประกอบเป้าหมายซึ่งอาจเป็นตัวเลขระหว่าง 0 ถึง 1 พารามิเตอร์ duration o speed นอกจากนี้ยังจำเป็นสำหรับวิธีนี้ซึ่งระบุระยะเวลาของภาพเคลื่อนไหวที่จางหายไป

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

เอฟเฟตติ ดิ สกอร์ริเมนโต

Metodi slideUp() e slideDown()

วิธีการ jQuery slideUp() e slideDown() ใช้เพื่อซ่อนหรือแสดงองค์ประกอบ HTML โดยค่อยๆ ลดหรือเพิ่มความสูง (เช่น เลื่อนขึ้นหรือลง)

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

เช่นเดียวกับเมธอดเอฟเฟกต์ jQuery อื่นๆ คุณสามารถเลือกกำหนดพารามิเตอร์ระยะเวลาหรือความเร็วสำหรับเมธอดได้ slideUp() e slideDown() เพื่อควบคุมระยะเวลาของภาพเคลื่อนไหวของสไลด์ สามารถระบุระยะเวลาได้โดยใช้หนึ่งในสตริงก่อนหน้าdefiNite 'slow' o 'fast'หรือเป็นหน่วยมิลลิวินาที ค่าที่สูงขึ้นหมายถึงภาพเคลื่อนไหวที่ช้าลง

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

คุณยังสามารถระบุฟังก์ชันการเรียกกลับเพื่อดำเนินการหลังจากเสร็จสิ้นเมธอด slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

วิธี slideToggle()

วิธีการ jQuery slideToggle() แสดงหรือซ่อนองค์ประกอบที่เลือกโดยทำให้ความสูงขององค์ประกอบเคลื่อนไหว ดังนั้นหากองค์ประกอบแสดงขึ้นในตอนแรก องค์ประกอบนั้นจะถูกเลื่อนขึ้น หากซ่อนไว้ก็จะถูกเลื่อนลงมา เช่น สลับระหว่างเมธอด slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

ในทำนองเดียวกัน คุณสามารถระบุพารามิเตอร์อายุการใช้งานสำหรับวิธีการ slideToggle() อย่างไร slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

ในทำนองเดียวกัน คุณยังสามารถระบุฟังก์ชันการโทรกลับสำหรับเมธอดได้อีกด้วย slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

เอฟเฟกต์แอนิเมชั่น

วิธี animate()

วิธีการ jQuery animate() ใช้เพื่อสร้างภาพเคลื่อนไหวที่กำหนดเอง วิธีการ animate() ใช้เพื่อทำให้คุณสมบัติ CSS ที่เป็นตัวเลขเคลื่อนไหว เช่น width, height, margin, padding, opacity, top, left เป็นต้น แต่คุณสมบัติที่ไม่ใช่ตัวเลขเช่น color o background-color ไม่สามารถเคลื่อนไหวได้โดยใช้ฟังก์ชัน jQuery พื้นฐาน

ไวยากรณ์พื้นฐานของวิธีการ animate() ดังต่อไปนี้:

$(selector).animate({ properties }, duration, callback);

พารามิเตอร์เมธอด animate() มีความหมายดังต่อไปนี้:

• พารามิเตอร์คุณสมบัติที่จำเป็น defiเสร็จสิ้นคุณสมบัติ CSS เพื่อให้เคลื่อนไหว
• พารามิเตอร์ระยะเวลาที่ไม่บังคับจะระบุระยะเวลาที่ภาพเคลื่อนไหวจะทำงาน สามารถระบุระยะเวลาได้โดยใช้หนึ่งในสตริงก่อนหน้าdefiNite 'slow' o 'fast'หรือเป็นหน่วยมิลลิวินาที ค่าที่สูงขึ้นหมายถึงภาพเคลื่อนไหวที่ช้าลง
• พารามิเตอร์การเรียกกลับที่ไม่บังคับคือฟังก์ชันที่จะเรียกหลังจากแอนิเมชันเสร็จสิ้น

ด้านล่างนี้คือตัวอย่างง่ายๆ ของวิธีการ animate() ซึ่งทำให้รูปภาพเคลื่อนไหวจากตำแหน่งเดิมไปทางขวา 300 พิกเซลเมื่อคลิกปุ่ม

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

คุณยังสามารถทำให้คุณสมบัติต่างๆ ขององค์ประกอบเคลื่อนไหวพร้อมกันได้โดยใช้เมธอดนี้ animate(). คุณสมบัติทั้งหมดเคลื่อนไหวพร้อมกันโดยไม่ชักช้า

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

คุณยังสามารถทำให้คุณสมบัติหลายอย่างขององค์ประกอบเคลื่อนไหวได้ทีละรายการทีละรายการในคิวโดยใช้ฟังก์ชันการต่อข้อมูลของ jQuery

ตัวอย่างต่อไปนี้แสดงแอนิเมชัน jQuery ที่อยู่ในคิวหรือเชน ซึ่งแอนิเมชันแต่ละรายการจะเริ่มต้นเมื่อแอนิเมชันก่อนหน้าในองค์ประกอบเสร็จสิ้น เราจะเห็นฟังก์ชันการต่อข้อมูลในบทความต่อๆ ไป

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

ก็เป็นไปได้เช่นกัน defiค่าสัมพัทธ์ที่สมบูรณ์สำหรับคุณสมบัติภาพเคลื่อนไหว หากมีการระบุค่าด้วยคำนำหน้า += o -=ค่าเป้าหมายคำนวณโดยการเพิ่มหรือลบจำนวนที่ระบุออกจากค่าปัจจุบันของคุณสมบัติ

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

นอกจากค่าตัวเลขแล้ว แต่ละคุณสมบัติยังสามารถรับสตริงได้ 'show', 'hide' e 'toggle'. มันจะมีประโยชน์มากในสถานการณ์ที่คุณต้องการทำให้คุณสมบัติเคลื่อนไหวจากค่าปัจจุบันเป็นค่าเริ่มต้นและในทางกลับกัน

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

วิธี stop()

วิธีการ jQuery stop() ใช้เพื่อหยุดการทำงานของแอนิเมชั่น jQuery หรือเอฟเฟ็กต์ในรายการที่เลือกก่อนที่จะเสร็จสิ้น

ไวยากรณ์พื้นฐานของวิธีการ stop() สามารถกำหนด jQuery ด้วย:

$(selector).stop(stopAll, goToEnd);

พารามิเตอร์ในไวยากรณ์ข้างต้นมีความหมายดังต่อไปนี้:

• Il พารามิเตอร์ตัวเลือกบูลีน stopAllระบุว่าจะลบภาพเคลื่อนไหวที่อยู่ในคิวหรือไม่ ก่อนdefiไนท์คือ falseซึ่งหมายความว่าเฉพาะแอนิเมชั่นปัจจุบันเท่านั้นที่จะหยุด แอนิเมชั่นที่เหลือในคิวจะถูกดำเนินการในภายหลัง
• พารามิเตอร์บูลีน goToEnd ตัวเลือกระบุว่าจะทำแอนิเมชั่นปัจจุบันให้เสร็จทันทีหรือไม่ ก่อนdefiไนท์คือ false.

นี่คือตัวอย่างง่ายๆ ที่แสดงวิธีการ stop() ในการดำเนินการจริงที่คุณสามารถเริ่มและหยุดภาพเคลื่อนไหวได้ด้วยการคลิกปุ่ม

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

นี่เป็นอีกตัวอย่างหนึ่งของวิธีนี้ ซึ่งหากคุณคลิกปุ่มอีกครั้งSlide Toggle” หลังจากเริ่มแอนิเมชันแต่ก่อนที่จะเสร็จสิ้น แอนิเมชันจะเริ่มทันทีในทิศทางตรงกันข้ามกับจุดเริ่มต้นที่บันทึกไว้

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

ขณะสร้างเอฟเฟ็กต์โฮเวอร์แบบเคลื่อนไหว ปัญหาทั่วไปอย่างหนึ่งที่คุณอาจพบคือภาพเคลื่อนไหวหลายรายการค้างอยู่ในคิว เมื่อคุณวางและลบเคอร์เซอร์ของเมาส์อย่างรวดเร็ว ทำไมในสถานการณ์เช่นนี้ mouseenter gli mouseleave เหตุการณ์เกิดขึ้นอย่างรวดเร็วก่อนที่แอนิเมชั่นจะเสร็จสิ้น เพื่อหลีกเลี่ยงปัญหานี้และสร้างเอฟเฟ็กต์โฮเวอร์ที่สวยงามและราบรื่น คุณสามารถเพิ่ม stop(true, true)ไปยังห่วงโซ่เมธอด เช่น:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

โทรกลับ

คำสั่ง JavaScript ดำเนินการทีละบรรทัด อย่างไรก็ตาม เนื่องจากเอฟเฟ็กต์ jQuery ต้องใช้เวลาระยะหนึ่งกว่าจะเสร็จสิ้น โค้ดของบรรทัดถัดไปอาจทำงานในขณะที่เอฟเฟ็กต์ก่อนหน้ายังทำงานอยู่ เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น jQuery ให้ฟังก์ชันการโทรกลับสำหรับแต่ละเมธอดเอฟเฟกต์

ฟังก์ชันการโทรกลับเป็นฟังก์ชันที่ทำงานเมื่อเอฟเฟกต์เสร็จสิ้น ฟังก์ชันการเรียกกลับจะถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังเมธอดของเอฟเฟกต์ และมักจะปรากฏเป็นอาร์กิวเมนต์เมธอดสุดท้าย ตัวอย่างเช่น ไวยากรณ์พื้นฐานของเมธอดเอฟเฟกต์ jQuery slideToggle() โดยมีฟังก์ชันเรียกกลับที่สามารถระบุได้ดังนี้

$(selector).slideToggle(duration, callback);

พิจารณาตัวอย่างต่อไปนี้ที่เราได้วางงบไว้ slideToggle()e alert()ข้าง ๆ กัน หากคุณลองใช้รหัสนี้ การแจ้งเตือนจะปรากฏขึ้นทันทีหลังจากคลิกปุ่มสลับโดยไม่ต้องรอให้เอฟเฟกต์การสลับสไลด์เสร็จสิ้น

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

และนี่คือเวอร์ชันแก้ไขของตัวอย่างก่อนหน้าที่เราแทรกคำสั่ง alert() ภายในฟังก์ชันการโทรกลับสำหรับเมธอด slideToggle(). หากคุณลองใช้รหัสนี้ ข้อความเตือนจะปรากฏขึ้นเมื่อเอฟเฟกต์การสลับสไลด์เสร็จสิ้น

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

ในทำนองเดียวกันคุณก็ทำได้ defiเสร็จสิ้นฟังก์ชันการโทรกลับสำหรับวิธีเอฟเฟกต์ jQuery อื่น ๆ เช่น show(), hide(), fadeIn(), fadeOut(), animate()ฯลฯ

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

หากคุณลองใช้โค้ดตัวอย่างด้านบน คุณจะได้รับข้อความเตือนเดียวกันสองครั้งต่อหนึ่งรายการ <h1> e <p>หลังจากคลิกปุ่มเปิดใช้งาน

BlogInnovazione.it