限制结合if语句jQuery的for循环

我的for循环与if语句组合出现了一个小问题 我想数一数这些图像，让它们一个接一个地消失 让我们看看我的代码：

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if( status === 'none' ){
    for (i; i < count; i++){
        $('.thumb:eq('+i+')').delay(i*100).fadeIn(500);
    }
}
else {
    for (i; i > limit; i--){
        $('.thumb:eq('+i+')').delay(i*100).fadeOut(500);
    }
}
});

$（“#动机切换器”）。单击（函数（）{
变量状态=$（'.thumb'）.css（'display'）；
变量计数=$（'#motive wrapper>img'）。长度；
var限值=0；
var i=0；
$（'#动机包装器'）.css（'display'，'block'）.appendTo（'#控件包装器'）；
如果（状态==‘无’）{
对于（i；i限制；i--）{
$（'.thumb:eq（'+i+'））。延迟（i*100）。衰减（500）；
}
}
});

我计算了图像的数量（var计数） 我想在for循环中使用这个数字。好久不见了；） fadeIn可以完美地工作，但fadeOut不能。没有任何错误信息，或者任何我可以处理的东西。有什么想法吗

以下是标记：

<button id="motive-toggler" class="standard hover">m</button>
<div id="motive-wrapper">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
    <img src="img/sample.png" class="thumb">
</div>

m

---

thx对于

fadeOut

的for循环中的任何帮助，您尚未给出

i

初始值。尝试：

for (i = count - 1; i >= limit; i--) {

而不是

for (i; i > limit; i--){

更新：

如果希望它们以相反的顺序淡出，请尝试：

for (i = count - 1; i >= limit; i--){
    var fadeOrder = count - i - 1; // thumb 3 will go first, then thumb 2, etc
    $('.thumb:eq('+i+')').delay(fadeOrder*100).fadeOut(500);
}

实际上，你用哪种方式绕拇指并不重要，只在乎你给每个拇指多少延迟。所以你可以改为：

for (i = 0; i < count; i++){
    var fadeOrder = count - i - 1; // thumb 3 will go first, then thumb 2, etc
    $('.thumb:eq('+i+')').delay(fadeOrder*100).fadeOut(500);
}

for（i=0；i

您的变量

i

以值

0

开头；然后在i>限制时执行

，然后执行
i--

但是，即使在第一次执行时，
i==limit
，因此
i>limit
的计算结果为
false
，您的循环也不会执行。
我的回答与其他答案大致相同

极限和我一样也是0。else语句中的for循环在开始循环时永远不会为true

下面是一个JSFIDLE，其中包含您的代码，但有一些错误修复可以使其正常工作。玩得开心

HTML:

JS:

$（“#动机切换器”）。单击（函数（）{
变量状态=$（'.thumb'）.css（'display'）；
变量计数=$（'#motive wrapper>img'）。长度；
var限值=0；
var i=0；
$（'#动机包装器'）.css（'display'，'block'）.appendTo（'#控件包装器'）；
如果（状态==‘无’）{
对于（i；i=限制；i--）{
$（'.thumb:eq（'+i+'））。延迟（i*100）。衰减（500）；
}}
});

来源：
您的淡出从前面开始，而不是从另一个方向开始。这是因为当你淡出时，你从3开始，然后是2，1，0。您的
延迟（i*100）
正在执行
延迟3002001000
因此，如果您将
（count-i-1）
放入，则您的延迟将翻转，并将变成
延迟0100020300


$（“#动机切换器”）。单击（函数（）{
变量状态=$（'.thumb'）.css（'display'）；
变量计数=$（'#motive wrapper>img'）。长度；
var限值=0；
var i=0；
$（'#动机包装器'）.css（'display'，'block'）.appendTo（'#控件包装器'）；
如果（状态==‘无’）{
对于（变量i=0；i=limit；i--）{
$（'.thumb:eq（'+i+'））。延迟（（计数-i-1）*100）。衰减（500）；
}
}
});
$（'.thumb'）。css（'display'）
将仅返回集合中第一个元素的值。如果代码运行时未隐藏，则永远不会返回
none
详细解释所需的行为。还可以在jsfiddle.net中设置演示。这里有小提琴我爱你们！现在，它可以在thx中快速帮助！：）但我还有一个问题：它从0开始逐渐消失，在3结束，但为什么它不从3开始逐渐消失，在0结束呢？并且逆转了我想要投票的把戏，但是我要换新的here@BillBronson我添加了一个更新，它将以相反的顺序淡出，效果非常好！再次感谢，祝你度过愉快的一天：）@BillBronson不客气，你也是。如果这个（或这里的不同答案）对您有效，请将其标记为已接受的答案。
<button id="motive-toggler" class="standard hover">m</button>
<div id="motive-wrapper">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
    <img src="http://sodafilm.de/wp-content/uploads/earth-50x50.jpg" class="thumb">
</div>

.thumb{
    display:none;
}

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if( status === 'none' ){
    for (i; i < count; i++){
    $('.thumb:eq('+i+')').delay(i*100).fadeIn(500);
}}else{
    i = count;
    for (i; i >= limit; i--){
    $('.thumb:eq('+i+')').delay(i*100).fadeOut(500);
}}
});

$('#motive-toggler').click(function(){
var status = $('.thumb').css('display');
var count = $('#motive-wrapper > img').length;
var limit = 0;
var i = 0;

$('#motive-wrapper').css('display','block').appendTo('#control-wrapper');

if ( status === 'none' ) {
    for (var i = 0; i < count; i++){
        $('.thumb:eq('+i+')').delay( i * 100 ).fadeIn(500);
    }
} else {
    for (var i = count - 1; i >= limit; i--) {
        $('.thumb:eq('+i+')').delay( (count - i - 1) * 100).fadeOut(500);
    }
}

});