each() 迭代之间的延迟

发布于 2024-12-16 02:24:48 字数 213 浏览 1 评论 0原文

在 Mootools 中，我想一次淡入一组 div 中的一个。基本上我想在每次迭代之间添加延迟：

$$('.someclass').each(function(el){
      el.set('tween', {
        duration: 1000
      });
      el.tween('opacity',0,1);
    });

原文

In Mootools i want to fade in a group of div's one at a time. Basically i want to add a delay between each iteration of each:

$('.someclass').each(function(el){
      el.set('tween', {
        duration: 1000
      });
      el.tween('opacity',0,1);
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

⒈起吃苦の倖褔 2024-12-23 02:24:48

或者你可以这样做......

document.getElements('.someclass').each(function(el, index) {
    el.set('tween', {
        duration: 1000
    }).fade.delay(index * 1000, el, [0, 1]);
});

这将在第一个淡入淡出后 1 秒开始每次连续淡入淡出。

在 1.3.2 中测试并工作： http://jsfiddle.net/dimitar/jMdbR/

似乎已损坏在 1.4.1 中： http://jsfiddle.net/dimitar/jMdbR/1/ 由于方法重载到被删除的 Fx.Tween 实例 - 尽管您可以通过在开始之前设置不透明度来解决它 - 或使用.tween：

document.getElements('.someclass').each(function(el, index) {
    el.set('tween', {
        duration: 1000
    }).tween.delay(index * 1000, el, ["opacity", [0, 1]]);
});

http://jsfiddle.net/dimitar/jMdbR/4/ 对于 1.4.1 版本，使用补间。

or you could just do....

document.getElements('.someclass').each(function(el, index) {
    el.set('tween', {
        duration: 1000
    }).fade.delay(index * 1000, el, [0, 1]);
});

this will start each successive fade 1 second after the first one.

tested and working in 1.3.2: http://jsfiddle.net/dimitar/jMdbR/

seems broken in 1.4.1: http://jsfiddle.net/dimitar/jMdbR/1/ due to the method overloading to the Fx.Tween instance being removed - though you can work around it by setting the opacity before you begin--or using .tween:

document.getElements('.someclass').each(function(el, index) {
    el.set('tween', {
        duration: 1000
    }).tween.delay(index * 1000, el, ["opacity", [0, 1]]);
});

http://jsfiddle.net/dimitar/jMdbR/4/ for the 1.4.1 ver working with tween.

回复收藏 0 原文

凝望流年 2024-12-23 02:24:48

您可以通过函数迭代循环来完成此操作。

var divs = $(".someclass"); // Assuming this object is Array-like

var iterator = function (elements, i) {
    if (!elements.hasOwnProperty(i)) return;

    var element = elements[i++];
    element.set("tween", {duration: 1000});
    element.tween("opacity", 0, 1);

    // Note: not sure if this is the actual API to get notified when
    // the animation completes. But this illustrates my point.
    element.set("events", {complete: function () {
        iterator(elements, i);
    }});
}

iterator(divs, 0);

鉴于 MooTools 提供了一个 API 来在动画完成时收到通知，您可以使用它通过更新的 i 计数器递归调用迭代器函数。

You can do this with a functional iterative loop.

var divs = $(".someclass"); // Assuming this object is Array-like

var iterator = function (elements, i) {
    if (!elements.hasOwnProperty(i)) return;

    var element = elements[i++];
    element.set("tween", {duration: 1000});
    element.tween("opacity", 0, 1);

    // Note: not sure if this is the actual API to get notified when
    // the animation completes. But this illustrates my point.
    element.set("events", {complete: function () {
        iterator(elements, i);
    }});
}

iterator(divs, 0);

Given MooTools provides an API to get notified when the animation is finished, you can use that to call the iterator function recursively with the updated i counter.

回复收藏 0 原文

~没有更多了~