कैसे पाश के लिए एक का हर बार गुजरने पर एनीमेशन पर देरी को बढ़ाने के लिए

Question

सबसे पहले मैं मैं क्या पल here पर है की एक बुनियादी प्रदर्शन बना लिया है।

दूसरा यह जावास्क्रिप्ट मैं उपयोग कर रहा हूँ है।

var boxes = ["#one","#two","#three","#four"]; 

boxhover = function(a){ 
    $("#hover").hover(
     function(){ 
      $(a).stop(true).delay(250).animate({opacity:1}); 
     }, 
     function(){ 
      $(a).stop(true).delay(250).animate({opacity:0}); 
     } 
    ) 
} 

for(var i=0; i<boxes.length; i++) 
{ 
    boxhover(boxes[i]) 
} 

क्या मैं प्राप्त करने के लिए आशा करती हूं कि प्रत्येक बॉक्स मैं एनीमेशन कार्य करने के लिए एक देरी (आप ऊपर देख सकते हैं) जोड़ने की कोशिश की है 250 की देरी समय के साथ एक दूसरे के बाद एक मंडराना है और लूप के लिए एक सेटटाइमआउट भी, लेकिन कोई भाग्य नहीं है। कोई भी मदद बहुत अच्छी रहेगी।

Answer 1

आप अपने boxhover कार्य करने के लिए एक अतिरिक्त पैरामीटर के रूप में सरणी सूचकांक में पारित कर सकते हैं और फिर देरी कारक पर एक गुणा।

var boxes = ["#one","#two","#three","#four"]; 

boxhover = function(a, i){ 
    $("#hover").hover(
     function(){ 
      $(a).stop(true).delay(250 * i).animate({opacity:1}); 
     }, 
     function(){ 
      $(a).stop(true).delay(250 * i).animate({opacity:0}); 
     } 
    ) 
} 

for(var i=0; i<boxes.length; i++) 
{ 
    boxhover(boxes[i], i) 
} 

jsfiddle

वैकल्पिक समाधान:

$("#hover").on({ 
    'mouseenter': function(e) { 
     // Animate the box set to visible 
     animateBoxSet(1); 
    }, 
    'mouseleave': function(e) { 
     // Animate the box set to invisible 
     animateBoxSet(0); 
    } 
}); 

function animateBoxSet(opacity) { 
    // For each box 
    $('.box').each(function (index, element) { 
     // Set the delay based on the index in the set 
     var delay = 250 * index; 
     // Animate it the visibility after the delay 
     $(element).stop(true).delay(delay).animate({ 
      'opacity': opacity 
     }); 
    }); 
} 

:

#hover पर बाध्यकारी कई मंडराना ईवेंट हैंडलर्स से बचने और आईडी की एक सरणी बनाए रखने के लिए होने के लिए, आप निम्न कर सकते हैं

jsfiddle