प्रत्येक jQuery

Question

के लिए प्रतीक्षा करें मैं प्रत्येक कथन के भीतर एक div fade in/out बनाने की कोशिश कर रहा हूं। समस्या यह है कि फीड इन/आउट पूरा होने से पहले अगली वस्तु को बुलाया जाता है।

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 

<div id='one'>one</div> 
<div id='two'>two</div> 
<div id='three'>three</div> 

<script> 
$.each([ "one", "two", "three"], function() { 
    console.log('start - ' + this); 
    animate(this); 
    console.log('end - ' + this); 
}); 

function animate(id) 
{ 
    box = '#' + id; 

    $(box).fadeOut(500, function() 
    { 

    console.log('showing - ' + id); 
    $(box).fadeIn(500); 
    $(box).css('backgroundColor','white'); 

    }); 

} 
</script> 

कंसोल से पता चलता -

start - one 
showing - one 
end - one 
start - two 
showing - two 
end - two 
start - three 
showing - three 
end - three 

तो कैसे मैं प्रत्येक के लिए प्रत्येक 'प्रतीक्षा कर सकते हैं पूरी तरह से पर जाने से पहले समाप्त हो गया है -

start - one 
end - one 
start - two 
end - two 
start - three 
end - three 
showing - one 
showing - two 
showing - three 

मैं की तरह कुछ चाहेगा अगला मूल्य?

Answer 1

आपको कॉलबैक का उपयोग करना होगा - वर्तमान फ़ंक्शन समाप्त होने पर निष्पादित होने वाले फ़ंक्शंस। .fadeOut साथ ऐसा करने के लिए आप क्या करेंगे: जब तक fadeOut पूरा कर लिया गया

$('#element').fadeOut(400, myFunction); 

myfunction बुलाया नहीं किया जाएगा। $ .get के साथ AJAX कॉल में कॉलबैक फ़ंक्शन भी हो सकते हैं।

function animate(myArray, start_index) { 

    // Stealing this line from Sam, who posted below. 
    if(!start_index) start_index = 0; 

    next_index = start_index+1; 
    if(next_index > myArray.length) { return; } 

    box = '#' + myArray[start_index]; 
    $(box).fadeOut(500, function() { animate(myArray,next_index); }); 
} 

और फिर अपने document.ready में आप फोन चाहते हैं::

यहाँ एक उदाहरण है कि काम करता है, हालांकि मैं वहाँ एक बेहतर तरीका है यकीन है,

animate(theArray); 

Answer 2

लगता है जैसे आप divs की सूची के माध्यम से "चक्र" की कोशिश कर रहे हैं। क्या आपने jQuery Cycle plugin चेक आउट किया है?

Answer 3

यह कैसे के बारे में, समारोह में सरणी में प्रत्येक आइटम के माध्यम से जाकर एनिमेट करें?

var elements = [ "one", "two", "three"]; 
animate(elements); 

function animate(elements, index) 
{ 
    if(!index) index = 0; 
    var box = '#' + elements[index]; 
    var $$box = $("#box"); 
    console.log('start - ' + elements[index]); 
    $$box.fadeOut(500, function() 
    { 
     console.log('showing - ' + elements[index]); 
     $$box.fadeIn(500, function() { 
      console.log('end - ' + elements[index]); 
      if(elements[++index]) animate(elements, index); 
     }).css('backgroundColor','white'); 
    }); 
} 

तुम भी वापस शुरू करने के लिए लूप अगर आप चाहते हैं कर सकते हैं:

var elements = [ "one", "two", "three"]; 
animate(elements); 

function animate(elements, index) 
{ 
    if(!index) index = 0; 
    var box = '#' + elements[index]; 
    var $$box = $(box); 
    console.log('start - ' + elements[index]); 
    $$box.fadeOut(500, function() 
    { 
     console.log('showing - ' + elements[index]); 
     $$box.fadeIn(500, function() { 
      $$box.css('backgroundColor','white'); 
      console.log('end - ' + elements[index]); 
      // go to next element, or first element if at end 
      index = ++index % (elements.length); 
      animate(elements, index); 
     }); 
    }).css('backgroundColor', 'aqua'); 
}