fadeIn() देरी() और fadeOut()

Question

के बीच का समय अंतर मैं कमांड लाइन (3) शुरू होने और समाप्त होने के समय से समय अंतर की गणना करने की कोशिश कर रहा हूं, लेकिन ऐसा लगता है कि मैं गलत हूं, लाइन (7) शो के रूप में शून्य। मुझे उम्मीद है कि यह 6500 (1500 + 3500 + 1500) दिखाएगा। कृपया मेरी मदद करें।

sd = new Date(); 
sdm = sd.getMilliseconds(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
ed = new Date(); 
edm = ed.getMilliseconds(); 
df = edm - sdm; 
document.getElementById('df').innerHTML = df; 

कारण मैं इस सवाल फेंक रहा हूँ, मैं एक स्लाइड शो (बहुत सरल) लिख रहा हूँ और यह ठीक से अनुक्रम में छवियों नहीं दिखा रहा है के रूप में यह एक से दूसरे कूदता है।

यह मेरा HTML और जेएस है।

$(document).ready(
     function() { 

      var i=0; 
      var imgs = $('#images ul').children(); 
      var j = imgs.length; 

      setInterval(function(){ runIt(); }, 6500); 

      function runIt() { 
       i = i + 1; 
       if (i == j) { i=0;} 

       $(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
      } 

    }); 

<div id="slider"> 
    <ul> 
     <li><img src="images/slider/s1.jpg" /></li> 
     <li><img src="images/slider/s2.jpg" /></li> 
     <li><img src="images/slider/s3.jpg" /></li> 
     <li><img src="images/slider/s4.jpg" /></li> 
    </ul> 
</div> 

धन्यवाद।

Answer 1

jQuery में फ़ंक्शन एनिमेट करने के लिए कॉल असीमित हैं। आपको कॉलबैक फ़ंक्शन का उपयोग करने की आवश्यकता है, जैसे:

$(element).fadeOut(delay, 
    function() { 
     // callback action 
    } 
); 

हालांकि, यह अपेक्षा के अनुसार काम नहीं करेगा। getMilliseconds मिलीसेकंड लौटाता है जो दूसरे की शुरुआत के बाद से गुजर चुका है, उदाहरण के लिए, यदि वर्तमान समय 20: 18: 20.430 है, तो यह 430 वापस आ जाएगा। आप इसके बजाय getTime विधि का उपयोग करना चाहते हैं। यह Unix Epoch के बाद मिलीसेकंड की संख्या देता है।

चूंकि आप jQuery का उपयोग कर रहे हैं, document.getElementById'ing के बजाय, आप अधिक संक्षिप्त $('#id').html('...'); का उपयोग कर सकते हैं। यह हमें छोड़ देता है:

sd = new Date(); 
sdm = sd.getTime(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500, 
    function() { 
     ed = new Date(); 
     edm = ed.getTime(); 
     df = edm - sdm; 
     $('#df').html(df); 
    } 
); 

आपकी स्लाइडशो शायद इस वजह से भी गड़बड़ हो गई है।

आपके दूसरे स्निपेट के बारे में एक छोटा सा नाइटपिक: var imgs = $('#images ul').children(); में, .children() विधि एक jQuery ऑब्जेक्ट देता है। आपको इसे वास्तव में $() के माध्यम से चलाने की ज़रूरत नहीं है, लेकिन यदि आप सोचते हैं कि यह अधिक स्पष्ट है तो आप कर सकते हैं।

imgs.eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 

Answer 2

मुझे लगता है कि मुझे एक जवाब मिला। यह आईई और क्रोम में काम करता है। मैंने एफएफ में जांच नहीं की।

$(document).ready(
    function() { 

     var i=0; 
     var imgs = $('#images ul').children(); 
     var j = imgs.length; 

     setInterval(function(){ runIt(); }, 5000); 

     function runIt() { 
      $(imgs).eq(i).fadeOut(1500) 
      i = i + 1; 
      if (i == j) { i=0;} 
      $(imgs).eq(i).fadeIn(1500); 
     } 

}); 

आपकी सभी टिप्पणियों के लिए धन्यवाद सुझाव। इस तरह, यह अटक नहीं होगा या यह एक छवि पकड़ नहीं होगा। मैंने फ़ेलिक्स क्लिंग की पहेली को देखा, छवि गायब हो रही है और अगली छवि आती है। मैं चाहता हूं कि अगली छवि मिश्रण हो। फिर से धन्यवाद।