प्रभाव में फीका के साथ एक तत्व जोड़ें [jQuery]


121
var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

यह काम नहीं लगता है।

मैं सिर्फ एक अच्छा प्रभाव चाहता हूं जब सामग्री संलग्न हो।

नोट: मैं चाहता हूं कि नया "ब्लाह" डिव में फीका हो, न कि पूरे "मायकंटेंट" में।


जवाबों:


262
$(html).hide().appendTo("#mycontent").fadeIn(1000);

1
मैं बस नई "ब्ला" div में फीका करना चाहता हूँ।
TIMEX

@ टाइम: यह वही है जो यह करना चाहिए।
icktoofay

क्या कोई कारण है जिसे आप पहले छिपाते हैं, फिर जोड़ते हैं (क्योंकि यह डोम में संलग्न होने से पहले एक शैली सेट करने के लिए तेज़ है, या ऐसा कुछ) या इससे कोई फर्क नहीं पड़ता है?
qwertymk

2
@qwertymk: कोई वास्तविक कारण नहीं है। अगर कभी भी ब्राउज़र का प्रतिपादन किया गया था जबकि DOM को अभी भी मैनिपुलेट किया जा रहा था (जो कि वर्तमान में कोई भी ब्राउज़र जहाँ तक मुझे नहीं पता है), तब तक इसमें फ़ेडिंग शुरू होने से पहले सामग्री का कोई भी फ्लैश नहीं होगा। फिर से, वास्तव में महत्वपूर्ण नहीं है।
icktoofay

1
@ArthurTarasov: यह #blahखुद के लिए है, जो ऐसा कुछ नहीं लगता है जो आप करना चाहते हैं (और मुझे लगता है कि यह एक नो-ऑप के रूप में व्याख्या की गई है)। आप केवल .appendToभाग को छोड़ सकते हैं और उपयोग कर सकते हैं $('#mycontent').hide().fadeIn(1000)
icktoofay

52

थोड़ी और जानकारी जोड़ना:

jQuery के "मेथड चेनिंग" को लागू करता है, जिसका अर्थ है कि आप एक ही तत्व पर चेन मेथड कॉल कर सकते हैं। पहले मामले में:

$("#mycontent").append(html).fadeIn(999);

आप fadeInकॉल को उस वस्तु पर लागू कर रहे होंगे जो इस मामले में विधि श्रृंखला का लक्ष्य है #mycontent। जो आप चाहते हैं वह नहीं।

@ Icktoofay का (महान) उत्तर आपके पास है:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

इसका मूल रूप से मतलब है, htmlइसे बनाएं , इसे डिफ़ॉल्ट रूप से छिपे हुए के रूप में सेट करें , इसे जोड़ें #mycontentऔर फिर इसे फीका करें। अब विधि श्रृंखला का लक्ष्य hmtlइसके बजाय है #mycontent


18

यह भी काम करता है

$(Your_html).appendTo(".target").hide().fadeIn(300);

सादर


लुप्त होती से निपटने के लिए यह सबसे सौंदर्यवादी रूप से आकर्षक तरीका है क्योंकि यह HTML को पूरी तरह से तैयार करने और इसमें लुप्त होने से पहले आवश्यक आयाम बनाने के लिए अनुमति देता है।
एंटोनियो नोगुआरेस

0

चूंकि fadeIn छिपाने के लिए शो से एक संक्रमण है, इसलिए जब आप इसे जोड़ते हैं और तब इसे दिखाने के लिए आपको "html" तत्व को छिपाना होगा।

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.