วิธีการเลือนเพื่อแสดง: อินไลน์บล็อก

ในหน้าของฉันฉันมีโหนด dom (ประมาณ 30) จำนวนมากที่ควรเพิ่มซึ่งมองไม่เห็นและจะจางหายไปเมื่อโหลดจนเต็ม
องค์ประกอบต้องการการแสดงผล: สไตล์อินไลน์บล็อก

ฉันต้องการใช้ฟังก์ชัน jquery .fadeIn () สิ่งนี้ต้องการให้องค์ประกอบเริ่มต้นมีการแสดงผล: ไม่มี; กฎในการซ่อนในตอนแรก หลังจากที่ fadeIn () องค์ประกอบนอกหลักสูตรจะมีการแสดงผลเริ่มต้น: สืบทอด;

ฉันจะใช้ฟังก์ชันการจางกับค่าที่แสดงนอกเหนือจากการสืบทอดได้อย่างไร

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

$("div").fadeIn().css("display","inline-block");

เพื่อเติมเต็มความคิดที่ดีของ Phil นี่คือ fadeIn () ที่โหลด fades ในแต่ละองค์ประกอบด้วยคลาสในทางกลับกันจางเปลี่ยนเป็น animate ():

เก่า:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

ใหม่:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

หวังว่าจะช่วย jQuery newb คนอื่นเหมือนตัวเอง :) ถ้ามีวิธีที่ดีกว่านี้โปรดบอกเรา!

คำตอบของ Makura ไม่ได้ผลสำหรับฉันดังนั้นวิธีแก้ปัญหาของฉันคือ

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hideนำไปใช้ทันทีdisplay: noneแต่ก่อนหน้านั้นจะบันทึกค่าที่แสดงปัจจุบันในแคชข้อมูล jQuery ซึ่งจะถูกเรียกคืนโดยการเรียกภาพเคลื่อนไหวในภายหลัง

ดังนั้นการdivเริ่มต้นที่กำหนดแบบคงที่display: noneคือ. จากนั้นจะถูกตั้งค่าinline-blockและซ่อนไว้ทันทีเพียงเพื่อให้จางกลับไปinline-block

อ้างอิงถึงเอกสาร jQueryสำหรับ.show(),

หากองค์ประกอบมีค่าการแสดงผลเป็นแบบอินไลน์จากนั้นจะถูกซ่อนและแสดงองค์ประกอบนั้นจะแสดงในบรรทัดอีกครั้ง

ดังนั้นวิธีแก้ปัญหาของฉันคือการใช้กฎ css กับการแสดงคลาส: inline-block บนองค์ประกอบจากนั้นฉันก็เพิ่มคลาสอื่นชื่อ "hide" ซึ่งใช้ display: none; เมื่อฉัน.show()อยู่ในองค์ประกอบนั้นจะแสดงแบบอินไลน์

สิ่งนี้ใช้งานได้แม้จะdisplay:noneตั้งค่าไว้ล่วงหน้าโดย css ใช้

$('#element').fadeIn().addClass('displaytype');

(และยัง$('#element').fadeOut().removeClass('displaytype');)

ด้วยการตั้งค่าใน CSS:

#element.displaytype{display:inline-block;}

ฉันคิดว่านี่เป็นวิธีแก้ปัญหาเพราะฉันเชื่อว่าfadeIn()ควรใช้งานได้เพื่อที่จะลบกฎสุดท้าย - display:noneเมื่อตั้งค่าเป็น#element{display:inline-block;display:none;}แต่มันจะลบทั้งสองอย่างผิดปกติ