jQuery के अपडाउन fadeIn

97

इसके जैसा : फेडिन और एपेंड का उपयोग करना

लेकिन वहाँ समाधान मेरे लिए काम नहीं कर रहे हैं। मैं कोशिश कर रहा हूँ:

 $('#thumbnails').append('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().fadeIn(2000);

लेकिन तब पूरी सूची एक ही बार में फ़ेड हो जाती है, न कि प्रत्येक आइटम को जोड़ा जाता है। ऐसा लगता है hide()और नहीं fadeIn()करने के लिए लागू किया जा रहा है । मैं उन्हें इसके बदले आवेदन करने के लिए कैसे प्राप्त करूंगा? यह भी काम नहीं करता है:$('#thumbnails')<li>

$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);

अन्य सुझाव?

jquery

— mpen
स्रोत

199

आपका पहला प्रयास बहुत करीब है, लेकिन याद रखें कि append()वह वापसी है #thumbnails, न कि वह वस्तु जिसे आपने अभी जोड़ा है। इसके बजाय, पहले अपने आइटम का निर्माण करें और hide().fadeIn()इसे जोड़ने से पहले आवेदन करें :

$('#thumbnails')
    .append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
        .hide()
        .fadeIn(2000)
    );

यह <li>समय से पहले निर्माण के लिए डॉलर फ़ंक्शन का उपयोग करता है । आप इसे दो पंक्तियों में भी लिख सकते हैं, निश्चित रूप से, यदि यह इसे स्पष्ट करता है:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .hide()
    .fadeIn(2000);
$('#thumbnails').append(item);

संपादित करें: आपका दूसरा प्रयास भी लगभग वहीं है, लेकिन आपको children()इसके बजाय उपयोग करने की आवश्यकता है filter()। उत्तरार्द्ध केवल वर्तमान क्वेरी से नोड हटाता है; आपका नया जोड़ा गया आइटम उस क्वेरी में नहीं है, बल्कि इसके बजाय एक बच्चा नोड है।

$('#thumbnails')
    .append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

— बेन ब्लैंक
स्रोत

1

सुंदर! अच्छी तरह से काम। आपको यह पता नहीं होगा कि जब तक थम्बनेल लोड नहीं हो जाता तब तक आप फीका शुरू करने में देरी कैसे करेंगे?

— एमपीएन

मेरे सिर के ऊपर से नहीं, लेकिन "जब मैं एक छवि को लोड करना समाप्त करता हूं तो मैं एक फ़ंक्शन को कैसे ट्रिगर करता हूं" एक अलग प्रश्न के लिए एक बुरा विचार नहीं है। ;-)

— बेन ब्लैंक

मुझे पता है, मुझे लगा कि आप इतने स्मार्ट हैं कि हम दो पक्षियों को एक पत्थर से मार सकते हैं: पी ओह वेल, Google ने एक समाधान प्रदान किया। धन्यवाद फिर से :)

— म्पेन

यदि आपके पास अभी भी लिंक है, तो मैं तकनीक देखना पसंद करूंगा।

— बेन ब्लैंक

1

उदाहरण के लिए धन्यवाद! यह styleनहीं है stle :)

— msroot

45

$('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .appendTo('#thumbnails')
    .hide().fadeIn(2000);

— रोमन स्किलारोव
स्रोत

4

डरपोक ... आदेश को उलट कर। मुझें यह पसंद है।

— एमपीएन

30

बेन ब्लैंक का जवाब अच्छा है, लेकिन मेरे लिए लुप्त होती, गड़बड़ है। अपेंड करने के बाद लुप्त होती कोशिश करें:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);

— डेरेक इलचुक
स्रोत

1

मैं पूरी तरह से सहमत हूं, यह दृष्टिकोण एक फ्रेम रेंडर से बच जाएगा जो एक झिलमिलाहट का कारण बनेगा ... बस थोड़ा और अधिक चालाकी

— पॉल कैरोल

धन्यवाद - इसने मेरे लिए एक गड़बड़ तय कर दी, जहां एक ही समय में उन दोनों को करते समय दिखाई देने वाली चीज़ का लेआउट / स्थिति असंगत थी।

— फ्रैक्स

3

कोशिश करो!

 $('#thumbnails').append(<li> your content </li>);
 $('#thumbnails li:last').hide().fadeIn(2000);

— Ogait
स्रोत

2

इसे इस्तेमाल करे:

$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);

— वेसम एल मह्डी
स्रोत

0

यहाँ मैं के साथ चला गया समाधान है:

function onComplete(event, queueID, fileObj, response, info) {
    var data = eval('(' + response + ')');
    if (data.success) {
        $('#file-' + queueID).fadeOut(1000);
        var img = new Image();
        $(img).load(function () { // wait for thumbnail to finish loading before fading in
            var item = $('<li id="thumb-' + data.photo_id + '"><a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"></a><a href="#" class="edit" alt="Edit"></a><div class="thumb-corners"></div><img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/></li>');
            $('#thumbnails').append(item.hide().fadeIn(2000));).attr('src', '/photos/t/' + data.filename);
        } else {
            $('#file-' + queueID).addClass('error');
            //alert('error ' + data.errno); // TODO: delete me
            $('#file-' + queueID + ' .progress').html('error ' + data.errno);
        }
    }
}

यह अपलोड के साथ काम करता है । यह loadछवि को लोड होने से पहले समाप्त होने की प्रतीक्षा करने के लिए jquery की घटना का उपयोग करता है। यकीन नहीं होता कि यह सबसे अच्छा तरीका है, लेकिन इसने मेरे लिए काम किया।

— mpen
स्रोत