0

当用户按下按钮移动到下一个图像时，我正在处理图像上的一些过渡。当有多个相邻的非常窄的图像时，这些图像将同时转换。所以我检查图像上的宽度并将薄的添加到数组中，然后在数组中的每个对象上运行过渡。我想在数组中每个图像的动画之间创建一点延迟，所以我试图在 1 秒超时后运行我的 jQuery.animate。

这是我试图让超时工作但没有成功的方法：

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

过渡输出（）：

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

我使用 CMS 的闭包示例让它工作。但是，现在我遇到了一个新问题。过渡只发生在第二张图像上。当有三幅图像时，它将动画图像 1、延迟、动画图像 2、动画图像 3。2 和 3 之间没有延迟。

这是新代码：

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}
4

3 回答 3

3

通过查看您的代码，我认为您还有另一个闭包问题，这可能是我在人们使用循环和嵌套函数时看到的最常见的问题。

你的回调函数引用的i变量是相同的（因为 JavaScript 只有函数作用域，没有块作用域），当这些函数异步执行时，循环已经完成，变量将包含所有情况在哪里使用。setTimeoutiset.length - 1setTimeout

像往常一样，尝试i使用另一个闭包来捕获变量：

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}
于 2009-11-30T04:10:52.867 回答
0

当涉及到定时动画/效果时，使用超时是一件很棘手的事情。

我没有测试你的代码，但是通过浏览它，我注意到你没有使用setTimeout任何东西来清除它们。

当用户在“延迟”期间触发事件时会发生什么？您还必须实施一些措施来管理它。

抱歉，我现在没有给你答案，也许等我有更多时间或者有人提出更优雅的解决方案时。

于 2009-11-30T02:49:51.847 回答
0

jquery fadeOut http://docs.jquery.com/Effects/fadeOut允许您创建一个回调，这是一个您可以在fadeOut 完成时运行的函数。因此，如果您愿意，可以将淡入淡出链接在一起，这样当一个完成时，它会调用下一个。如果那不是您要找的东西，我可能会误读您的问题。

另外，在示例 3 中，我认为您想这样编写它，并且没有将函数定义传递给 setTimeout，因为那样不会做任何事情。

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);
于 2009-11-30T03:02:37.047 回答