Question

我的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);
    }
}
});

我计算了图像数量（var count）我想在我的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>

thx任何帮助＆lt; 3 并抱歉我的坏英格兰

Answer 1

在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);
}

Answer 2

您的变量i以值0开头;然后你做while i > limit，然后你做i--。

但即使是第一次，i == limit，i > limit评估为false，您的循环也不会执行。

Answer 3

与其他答案一样，我也差不多。

限制也是0，因为我也是。在else语句中的for循环永远不会开始循环。

这是一个带有代码的JSFiddle，但有一些错误修正可以使它工作。玩得开心。

HTML：

<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>

CSS：

.thumb{
    display:none;
}

JS：

$('#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);
}}
});

来源：http://jsfiddle.net/B5ZYJ/7/

Answer 4

你的fadeOuts从前面开始，而不是从另一个方向开始。这是因为当你褪色时，你从3开始，然后是2,1,0，而你的delay(i*100)正在delay 300, 200, 100, 0，所以如果你放(count - i - 1)，那么你的延迟会翻转并转向进入delay 0, 100, 200, 300

http://jsfiddle.net/dLS4e/1

$('#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);
    }
}

});

限制for循环结合if语句jQuery

4 个答案: