จะให้ jQuery รอจนกว่าเอฟเฟกต์จะเสร็จสิ้นได้อย่างไร?

107

ฉันแน่ใจว่าฉันอ่านเกี่ยวกับเรื่องนี้เมื่อวันก่อน แต่ฉันไม่สามารถหาอ่านได้จากที่ไหนเลย
ฉันมีfadeOut()เหตุการณ์หลังจากนั้นฉันลบองค์ประกอบ แต่ jQuery กำลังลบองค์ประกอบก่อนที่มันจะมีโอกาสที่จะเลือนหายไป
ฉันจะให้ jQuery รอจนกว่าองค์ประกอบจะจางหายไปจากนั้นจึงลบออกได้อย่างไร

jquery

— ยูริเดียม
แหล่งที่มา

167

คุณสามารถระบุฟังก์ชันการโทรกลับ:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

เอกสารที่นี่ .

— Paolo Bergantino
แหล่งที่มา

บิงโก ฉันคิดว่ามันเป็นอย่างนั้น แต่สิ่งที่ฉันต้องทำคือใส่ฟังก์ชั่นทั้งหมดของฉันไว้ที่นั่นไม่ใช่แค่ส่วนลบเท่านั้น ปล. หากมีใครสนใจหนังสือที่ผมอ่านและพบอีกครั้งคือ Learning JQuery - Better Interaction and Design ขอบคุณอีกครั้ง

— uriDium

หากใครมี jQuery เก่าข้อบกพร่อง "animation done callback" นี้เป็นสิ่งที่น่ารังเกียจ: bugs.jquery.com/ticket/5684

— JustAMartin

178

ด้วยเวอร์ชัน jQuery 1.6 คุณสามารถใช้.promise()วิธีการ

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});

— เรนัลโดจูเนียร์
แหล่งที่มา

4

สิ่งนี้ซ้ำซ้อนสำหรับภาพเคลื่อนไหว jQuery ส่วนใหญ่เนื่องจากมีอาร์กิวเมนต์เรียกกลับในวิธีการส่วนใหญ่ แต่การใช้promise()หรือwhen()และdone()คุณสามารถใช้ประโยชน์จากพฤติกรรมที่ยอดเยี่ยมจากวิธีการของบุคคลที่สามหรือแม้แต่ของคุณเอง +1 สำหรับความหมาย.promise()!

— stuartc

4

ไม่เคยได้ยินมาก่อนเลยแค่ช่วยก้นของฉัน

— prismspecs

1

ในกรณีของฉันฉันพยายามเข้าถึงภาพเคลื่อนไหวปัจจุบันขององค์ประกอบที่เกิดขึ้นที่อื่นในรหัสของฉันและด้วยเหตุนี้ฉันจึงไม่สามารถเข้าถึงการเรียกกลับได้ +1

— Kristian

11

การใช้สัญญา () ยังช่วยให้คุณสามารถตั้งค่าการโทรกลับครั้งเดียวเมื่อทุกอย่างเสร็จสิ้น หากคุณเรียกใช้ fadeOut () ในชุดของ 10 สิ่งจะมีการเรียกกลับหนึ่งรายการสำหรับแต่ละสิ่งโดยตั้งค่า "this" เป็นขอบเขตที่เหมาะสม หากคุณต้องการยิงเพียงครั้งเดียวฟังก์ชันนี้มีประโยชน์มาก นอกจากนี้: หากคุณเคลื่อนไหวบนตัวเลือกที่กลายเป็นองค์ประกอบศูนย์การเรียกกลับปกติจะไม่เริ่มทำงาน Promise () จะยิงในตอนท้ายไม่ว่าจะเกิดอะไรขึ้น

— zslayton

6

คุณสามารถ$(selector).fadeOut('slow').promise().done(function(){...});

— เชื่อมโยง

9

คุณสามารถใช้$.when()เพื่อรอจนกว่าจะpromiseเสร็จสิ้น:

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

ในกรณีที่คุณดำเนินการตามคำขอที่อาจล้มเหลวเช่นกันคุณสามารถดำเนินการต่อไปอีกขั้น:

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );

— ไคเซอร์
แหล่งที่มา

2

ส่วนนี้ของคำตอบนี้ใช้$.when()ไม่ได้ผลเนื่องจากmyEvent()ไม่ได้คืนคำสัญญาและ$.when()คาดหวังว่าคุณจะผ่านคำสัญญาหนึ่งข้อหรือมากกว่าเพื่อให้คำตอบนั้นทำงานได้

— jfriend00

6

หากเป็นสิ่งที่คุณต้องการจะเปลี่ยนให้จางหายไปและทำให้อีกรายการจางลงในที่เดียวกันคุณสามารถวางแอตทริบิวต์ {position: absolute} ไว้บน div ดังนั้นภาพเคลื่อนไหวทั้งสองจะเล่นทับกันและคุณไม่มี เพื่อรอให้แอนิเมชั่นจบลงก่อนที่จะเริ่มต้นในครั้งต่อไป

— ซามิน
แหล่งที่มา