स्टैगर jQuery एनिमेशन

Question

मैं jquery 1.3 में आइटम्स की श्रृंखला को एनिमेट करना चाहता हूं, प्रत्येक अगली वस्तु पहली एनीमेशन के माध्यम से आधे रास्ते से शुरू होती है। दूसरे शब्दों में, मुझे आधा कतार प्रभाव चाहिए। मैंने नीचे दिए गए कोड का उपयोग करने का प्रयास किया, लेकिन यह काम नहीं कर रहा है। क्या किसी के पास कोई विचार है?

$("h3").click(function(){ 
     $(".projectItem").each(function (i) { 
     if (i > 0){ 
      setTimeout ("", 500); 
     } 
     $(this).animate({"opacity": 0, "duration": 1000}); 
     }); 
    }); 

पुनश्च: मैं विभिन्न उपयोग करने के लिए "निष्क्रिय" या "ठहराव" jQuery प्लगइन, का प्रयास किया लेकिन मुझे लगता है इस्तेमाल तकनीक पूर्व jQuery 1.3 थे?

पी पी एस: आपकी मदद :)

Answer 1

आप कुछ इस तरह की कोशिश कर सकते:

$("h3").click(function(){ 
    $(".projectItem").each(function (i) { 
    // store the item around for use in the 'timeout' function 
    var $item = $(this); 
    // execute this function sometime later: 
    setTimeout(function() { 
     $item.animate({"opacity": 0}, 1000); 
    }, 500*i); 
    // each element should animate half a second after the last one. 
    }); 
}); 

सामान्य विचार यहाँ .projectItem की अपनी सूची का उपयोग कर रहा है - आप एनीमेशन में देरी शुरुआत से 500ms प्रति आइटम तक। पहली आइटम (i=0) में 0 एमएमएस देरी होगी और अगले ईवेंट लूप के दौरान तुरंत (लगभग) निष्पादित होगा। इससे पहले कि एक अन्य आइटम प्रति आइटम 500ms से देरी हो, और चूंकि आपकी एनीमेशन 1000ms तक चलती है, यह अंतिम आइटम एनीमेशन के माध्यम से लगभग आधा रास्ते शुरू हो जाएगी।

Answer 2

के लिए अग्रिम धन्यवाद मुझे लगता है कि यह आसान है 2 भागों में एनीमेशन को तोड़ने के लिए (0.5 करने के लिए अस्पष्टता 1 से, और 0 के लिए 0.5 से) और यदि तोड़ने नियमित कतार का उपयोग करें (संभव है)।

इस कोड है अगर हम अस्पष्टता 1 से शुरू करें:

$("h3").click(function(){ 
    $(".projectItem").each(function (i) { 
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){ 
     //... put here something in the half way ... 
     $(this).animate({"opacity": 0, "duration": 500}); 
    }); 
    }); 
});