jQuery slideUp (). remove () ดูเหมือนจะไม่แสดงภาพเคลื่อนไหว slideUp ก่อนที่จะมีการลบเกิดขึ้น

95

ฉันมี JavaScript บรรทัดนี้และพฤติกรรมที่ฉันเห็นคือมันselectedLiหายไปทันทีโดยไม่ต้อง "เลื่อนขึ้น" นี่ไม่ใช่พฤติกรรมที่ฉันคาดไว้

ฉันควรทำอย่างไรเพื่อให้selectedLiสไลด์ขึ้นก่อนที่จะถูกลบออก

selectedLi.slideUp("normal").remove();

javascript jquery animation

— Eric Schoonover
แหล่งที่มา

198

อาจสามารถแก้ไขได้โดยวางสายเพื่อลบใน callback arg ไปที่ slideUp?

เช่น

selectedLi.slideUp("normal", function() { $(this).remove(); } );

— ฌอนบ
แหล่งที่มา

4

โปรดทราบว่า "ช้า" และ "เร็ว" เป็นความเร็วเดียว ความเร็วอื่น ๆ ต้องมีหน่วยเป็นมิลลิวินาทีมิฉะนั้นค่าเริ่มต้นจะเป็น 400 keyframesandcode.com/resources/javascript/deconstructed/jquery/…

— bendman

20

คุณต้องมีความชัดเจนมากกว่านี้: แทนที่จะพูดว่า "สิ่งนี้" (ซึ่งฉันเห็นด้วยว่าควรใช้งานได้) คุณควรทำสิ่งนี้:

$("#yourdiv").slideUp(1000, function() {
    $(this).remove();
});

— เบลค
แหล่งที่มา

2

ขออภัย = ฉันลืมลบ ID ของฉันควรเป็น: $ ('# yourdiv'). slideUp (1,000, function () {$ ('# yourdiv'). remove ();});

— Blake

12

การใช้ $ (this) แทน $ ("# yourdiv") ได้รับการปรับให้เหมาะสมมากขึ้นเนื่องจาก jQuery ไม่จำเป็นต้องมองหาโหนด

— MaximeBernard

การใช้$("#yourdiv")แทน$(this)นั้นซ้ำซ้อนโดยสิ้นเชิงและนั่นไม่ใช่สาเหตุที่รหัสนี้แก้ไขปัญหาของ OP รหัสนี้แก้ไขปัญหาได้เนื่องจากใช้การcompleteโทรกลับ

— Gavin

8

วิธีที่ง่ายที่สุดคือการเรียกใช้ฟังก์ชัน "remove ()" ภายใน slideUp เป็นพารามิเตอร์เหมือนที่คนอื่น ๆ กล่าวไว้ดังตัวอย่างนี้:

$("#yourdiv").slideUp("normal", function() {
    $(this).remove();
});

จำเป็นต้องเรียกใช้ภายในฟังก์ชัน anonymous () เพื่อป้องกันไม่ให้ลบ () ดำเนินการก่อนที่ slideUp จะสิ้นสุด อีกวิธีที่เท่าเทียมกันคือการใช้ฟังก์ชัน jQuery "สัญญา ()" ดีกว่าสำหรับผู้ที่ชอบรหัสอธิบายตัวเองเช่นฉัน;)

$("#yourdiv").slideUp("normal").promise().done(function() {
    $(this).remove();
});

— xaviqv
แหล่งที่มา

3

การใช้คำสัญญาคุณสามารถรอให้แอนิเมชั่นหลาย ๆ ภาพเสร็จสิ้นเช่น:

selectedLi.slideUp({duration: 5000, queue: false})
.fadeOut({duration: 3000, queue: false})
.promise().done(function() {
    selectedLi.remove()
})

— มีชื่อเสียง
แหล่งที่มา

-2

selectedLi.slideUp(200, this.remove);

1

ฉันทดสอบแล้ว - มันไม่ได้ลบองค์ประกอบหลังจากเลื่อนขึ้น

— Konstantin Spirin

ซ่อนองค์ประกอบอย่างมีประสิทธิภาพ แต่ไม่ได้ลบออกจาก DOM

— andreszs