.fadeIn（）和.fadeOut（）不是循環

Question

工作中，我想完全相同的功能，如http://jsfiddle.net/8nqkA/2/（某人編碼）

所以，我想是這樣的http://jsfiddle.net/c78oLbg2/4/

我不是瞭解我的代碼中的錯誤在哪裏。 可能有一些很瑣碎，我不知道，因爲我在這裏是新手：

no_of_p = $('div#mydiv p').length; 
 
for (i = 0; i < no_of_p; i++) { 
 
    $('div#mydiv p:eq(i)').fadeIn(1000); 
 
    $('div#mydiv p:eq(i)').fadeOut(1000); 
 
};

#mydiv p { 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="mydiv"> 
 
    <p>para 1</p> 
 
    <p>para 2 </p> 
 
    <p>para 3</p> 
 
</div>

Answer 1

您的變量不在字符串中解釋。如果你想在字符串中添加一個變量值，你需要一個字符串連接。就這樣：

$('div#mydiv p:eq('+i+')').fadeIn(1000); 
$('div#mydiv p:eq('+i+')').fadeOut(1000); 

但它會更容易使用的jQuery像.each提供的功能：

$('div#mydiv p').each(function(){ 
    $(this).fadeIn(1000).fadeOut(1000); 
}); 

這個問題的答案，爲什麼褪色不工作

---

不作一個循環淡入淡出，你應該做一個遞歸函數來淡化第一個元素，並用同一組元素減去第一個元素來調用它自己。該代碼做的：

recursiveFade($('div#mydiv p')); 
 

 
function recursiveFade($el){ 
 
    $el.first().fadeIn(1000).fadeOut(1000, function(){ 
 
     recursiveFade($el.slice(1)); 
 
    }) 
 
}

#mydiv p { 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="mydiv"> 
 
    <p>hi</p> 
 
    <p>how are you </p> 
 
    <p>bye</p> 
 
</div>

Answer 2

在你的代碼中，我被認爲是字符串，而不是詮釋。因此連接它

no_of_p = $('div#mydiv p').length; 
for (i = 0; i < no_of_p; i++) { 
    $('div#mydiv p:eq('+i+')').fadeIn(1000); 
    $('div#mydiv p:eq('+i+')').fadeOut(1000); 
}; 

Answer 3

使用callback在淡入

var i = 0; 

function myFunc() { 
    $('div#mydiv p').eq(i).fadeIn(2000 , function() {; 
    $('div#mydiv p').fadeOut(); 
       i++; 
      myFunc(); 
    }); 

} 

myFunc(); 

DEMO

Answer 4

您可以使用jQuery.delay（），使得它們相繼出現。

試試這個：

no_of_p = $('div#mydiv p').length; 
for (i = 0; i < no_of_p; i++) { 
    $('div#mydiv p:eq(' + i + ')').delay(i*2000).fadeIn(1000).fadeOut(1000); 
}; 

看看這裏：jsFiddle

Answer 5

有一些問題，在您的源代碼ADRESS，如指數i永遠不會改變，因爲它是選擇字符串的一部分。

但是，爲了擁有它，你已經顯示，呼叫應該是遞歸和回調函數中調用的代碼片段工作：

var i = 0; 
 
    function fadeInOut(index) { 
 
     var elt =$('div#mydiv p').eq(i); 
 
     elt.fadeIn(1000, function(){ 
 
      $(this).fadeOut(1000); 
 
      fadeInOut(i++); 
 
     });  
 
    } 
 

 
    fadeInOut(i);

#mydiv p { 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mydiv"> 
 
    <p>hi</p> 
 
    <p>how are you </p> 
 
    <p>bye</p> 
 
</div>

JSFiddle Demo。