2011-07-16 9 views
8

मैं एक div में फीका करने की कोशिश करता हूं जिसमें (इन) डिस्प्ले इनलाइन-ब्लॉक होना चाहिए।
ऐसा लगता है कि फीडइन विधि केवल प्रदर्शन = ब्लॉक मानती है।
क्या उस व्यवहार को बदलने का कोई तरीका है?प्रदर्शन के साथ fadeIn का उपयोग कैसे करें = इनलाइन-ब्लॉक

उत्तर

14

क्या मैंने उपरोक्त पढ़ लिया का एक संयोजन से, यह सबसे अच्छा मुझे मिल गया है:

$(div).css({ 
     opacity: 0, 
     display: 'inline-block'  
    }).animate({opacity:1},600); 
+0

प्रदान करने के लिए एक प्रासंगिक लिंक है आप मेरा दिन –

+0

बचाएं बस महान आदमी .. धन्यवाद – Novasol

17

यदि आप css() का उपयोग करते हैं?

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

मैं इस प्रयास नहीं किया है, लेकिन मैं एक महसूस कर रही है कि यह तत्व एक सा आस-पास जाएं कारण हो सकता है के रूप में, इसे एनीमेशन के दौरान 'डिस्प्ले: ब्लॉक' में बदल दिया जाएगा, और उसके बाद एनीमेशन समाप्त होने के बाद 'डिस्प्ले: इनलाइन-ब्लॉक' पर वापस आ जाएगा। तो मुझे नहीं लगता कि यह काम करने जा रहा है। यद्यपि कोशिश करने लायक हो सकता है, तो वैसे भी +1। – Spudley

+0

@ स्प्डली मैंने सोचा और इसे 'स्थिति: इनलाइन' के बजाय 'स्थिति: इनलाइन-ब्लॉक' के साथ भी देखा, यह देखने के लिए कि क्या इसे पहले 'डिस्प्ले: ब्लॉक' के रूप में दिखाया गया है लेकिन ऐसा नहीं हुआ। http://jsfiddle.net/6DcY9/ बेशक दूसरे कोड के आधार पर यह – Sotiris

+0

हो सकता है मैं एक 'फीडइन ("फास्ट") कर रहा हूं। सीएसएस ({' डिस्प्ले ':' इनलाइन-ब्लॉक '})' और यह मेरे लेआउट को चारों ओर कूदने का कारण नहीं बनाता है। मुझे लगता है कि यह फीडइन खत्म होने से पहले डिस्प्ले प्रॉपर्टी सेट करता है। इसके अतिरिक्त, चूंकि आईई 7 इनलाइन-ब्लॉक की व्याख्या करने के बारे में नहीं जानता है, इसलिए मैं जांच कर रहा हूं कि 'html' में 'i77' की कक्षा है या फिर '.css ({' display ':' inline ',' zoom ':' 1 '})' बदले में। – Jazzerus

6

मैं inline-block तत्व के अंदर एक अतिरिक्त तत्व परत डाल, और बदले में fading कि सुझाव देना चाहेंगे।

<div style='display:inline-block;'> 
    <div id='fadmein'>....</div> 
</div> 

$('#fademein').fadeIn(); 

मुझे पता है कि यह अतिरिक्त मार्कअप है, लेकिन यह शायद समस्या का सबसे व्यावहारिक समाधान है।

वैकल्पिक विकल्प fadeIn() का उपयोग करने के बजाय अस्पष्टता को बदलने के लिए JQuery के animate() विधि का उपयोग करना होगा। यह केवल opacity संपत्ति को बदल देगा; इसलिए display संपत्ति छूटी जाएगी।

+0

शुरू होता है इस पर निर्भर करता है कि आपने सामग्री को कैसे सेट अप किया है, यह हो सकता है सबसे अच्छा दिखने वाला समाधान नहीं है, लेकिन यह शायद कार्यान्वित करने के लिए सबसे आसान है और आश्चर्यजनक रूप से अच्छी तरह से काम करता है। बहुत बहुत धन्यवाद! – shmeeps

1

jQuery फ़ोरम में this question के अनुसार, सुझाया गया समाधान अपनी इच्छित छवि को block में बदलना और इसे फ़्लोट करना है।

+5

गोश संख्या। यदि आप 'इनलाइन-ब्लॉक' का उपयोग कर रहे हैं, तो ऐसा इसलिए है क्योंकि आप फ़्लोटिंग से बचने की कोशिश कर रहे हैं। – Spudley

+0

मैं सहमत हूं। लेकिन मुझे लगता है कि यह – Simeon

संबंधित मुद्दे