0

我的 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 的任何帮助 <3 对不起我的英语不好

4

4 回答 4

1

在 for 循环中fadeOut，您没有给出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);
}
于 2013-11-06T13:42:59.957 回答
1

您的变量i以 value 开头0；然后你做一个while i > limit然后你做i--。

但即使在第一次运行时，i == limit, so也会i > limit评估为false，并且您的循环不会被执行。

于 2013-11-06T13:43:23.303 回答
0

您的淡出从前面开始，而不是相反。这是因为当您淡出时，您从 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);
    }
}

});
于 2013-11-06T13:56:06.723 回答
0

我和其他答案差不多。

limit 也是 0，因为 i 也是。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/

于 2013-11-06T13:53:49.673 回答