प्रदर्शित करने के लिए कैसे फीका: इनलाइन-ब्लॉक

Question

मेरे पृष्ठ में मेरे पास एक गुच्छा (लगभग 30) डोम नोड्स हैं जिन्हें अदृश्य जोड़ा जाना चाहिए, और जब वे पूरी तरह लोड हो जाएं तो फीका हो।
तत्वों को एक डिस्प्ले की आवश्यकता है: इनलाइन-ब्लॉक शैली।

मैं jquery .fadeIn() फ़ंक्शन का उपयोग करना चाहता हूं। इसके लिए आवश्यक है कि प्रारंभ में तत्व में एक डिस्प्ले हो: कोई भी नहीं; प्रारंभ में इसे छिपाने के लिए नियम। fadeIn() के बाद तत्वों के पास डिफ़ॉल्ट डिस्प्ले होता है: वारिस;

मैं उत्तराधिकारी के अलावा प्रदर्शन मूल्य के साथ फीका कार्यक्षमता का उपयोग कैसे कर सकता हूं?

Answer 1

आप अस्पष्टता को बदलने के लिए jQuery की animate फ़ंक्शन का उपयोग कर सकते हैं, जिससे प्रदर्शन अप्रभावित हो जाता है।

Answer 2

बस फिल के अच्छा विचार बाहर मांस के लिए, यहाँ एक fadein (है) कि भार वर्ग बदले में .faded साथ प्रत्येक तत्व में fades, चेतन करने के लिए परिवर्तित():

ओल्ड:

$(".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 मदद :) वहाँ ऐसा करने के लिए एक बेहतर तरीका है, तो कृपया हमें बताओ!

Answer 3

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

Answer 4

.show() के लिए jQuery docs के अनुसार,

एक तत्व इनलाइन का प्रदर्शन मान है, तो फिर, यह एक बार फिर से इनलाइन प्रदर्शित किया जाएगा छिपे रहते हैं और पता चला है।

तो इस समस्या का समाधान मेरी एक वर्ग प्रदर्शित करने के लिए एक सीएसएस नियम लागू करना था: तत्व पर इनलाइन-ब्लॉक, तो मैं एक और वर्ग "छिपाने" कहा जाता है प्रदर्शन लागू होता है कहा: कोई नहीं; जब मैं तत्व पर .show(), यह इनलाइन दिखाया।

Answer 5

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

Answer 6

पर यह फीका हुआ है, यह सीएसएस द्वारा display:none प्रीसेट के साथ भी काम करता है।सीएसएस में

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

(और यह भी $('#element').fadeOut().removeClass('displaytype');)

का प्रयोग सेटअप के साथ:

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

मैं इस एक समाधान पर विचार के रूप में मेरा मानना ​​है कि fadeIn() तो काम करना चाहिए कि यह सिर्फ पिछले नियम निकालना होगा - display:none जब #element{display:inline-block;display:none;} पर सेट किया गया है लेकिन यह खराब रूप से दोनों को हटा रहा है।