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

Question

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

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

मैं इनहेरिट कार्यक्षमता को वारिस के अलावा अन्य डिस्प्ले वैल्यू के साथ कैसे उपयोग कर सकता हूं?

Answer 1

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

Comments

मुझे यह समाधान बेहतर लगता है, सीएसएस को मेरे जेएस से बाहर रखता है।

— जोशडाउनंगे

@joshuadelange वास्तव में नहीं, अपारदर्शिता भी CSS

— रॉय

जहां यह होना चाहिए, उस पर इलमेंट को दिखाने / छिपाने की इंजीनियरिंग प्रक्रिया पर ध्यान केंद्रित करने के लिए +1।

— क्लेविस

Answer 2

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

Comments

यह निश्चित रूप से बेहतर जवाब है।

— जेसन

बहुत बढ़िया जवाब! इससे भी बेहतर, आप अपने सीएसएस में जो कुछ भी है उसे डिफ़ॉल्ट करने के लिए इसे खाली छोड़ सकते हैं:$("div").fadeIn().css("display","");

— ब्रैंडन डरहम

यह वास्तव में स्वीकृत उत्तर होना चाहिए; मौजूदा स्वीकृत उत्तर टिप्पणी का अधिक है।

— सिंसियर बियर्ड

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });यह सुनिश्चित करने के लिए कि प्रदर्शन: इनलाइन-ब्लॉक तब किया जाता है जब फ़ेडिन समाप्त हो जाता है

— साइमन

यह मेरे लिए काम नहीं करता है ... एक div पर एक प्रारंभिक प्रदर्शन शैली के साथ लागू किया जाता है जो किसी वर्ग का उपयोग नहीं करता है। तत्व का निरीक्षण करते हुए मैं देखता हूं कि कुछ मिलीसेकंड के लिए, ठीक है फीका कॉल करने के बाद, इसकी शैली में इनलाइन-ब्लॉक होता है, फिर शैली को ब्लॉक करने के लिए सेट किया जाता है। साइमन सुझाव के साथ प्रभाव अच्छा नहीं है, क्योंकि फीका के दौरान तत्व को ब्लॉक के रूप में प्रदर्शित किया जाता है

— Giox

Answer 3

फिल के अच्छे विचार को समझने के लिए, यहाँ एक फीका () है जो कक्षा के साथ प्रत्येक तत्व में फीका पड़ता है। बदले में, चेतन में बदल जाता है ():

पुराना:

$(".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 4

मकुरा का जवाब मेरे काम नहीं आया इसलिए मेरा समाधान था

<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 5

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

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

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

Comments

मैं यह मानूंगा कि जब आप सेट करते हैं तो यह भी काम करना चाहिए #el{display:inline-block;display:none;}और फिर $('#el').fadeIn();आपको इनलाइन-ब्लॉक मिलता है। लेकिन यह नहीं है।

— फंकी

Answer 6

यह display:noneसीएसएस द्वारा प्रीसेट के साथ भी काम करता है । उपयोग

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

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

CSS में सेटअप के साथ:

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

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