2

假设你在 mootools 中有一个数组：

// get the elements and set them as slide
var slideElements = $$('.mySlideElements');
slideElements.set('slide');

// and fire the event -> would slide all elements out at the same time
slideElements.slide('out');

我怎么能把它放在一条链子里，一次滑动一个？

到目前为止，如果我知道我将执行的操作的确切数量，我只能成功地链接。谢谢你的帮助。

4

3 回答 3

1

我最终在这个上做了很多工作，链接比我乍一看要复杂得多。我以前从未以这种方式使用过它：D

您绝对可以遍历slideElements数组。将元素事件相互链接是棘手的部分。我最终得到了一个循环关闭函数，该函数循环遍历每个slideElement项并将列表中的前一项链接到当前项：

<!-- Working example of chained sliding divs  -->
<div class="mySlideElements" style="background: red" id="slide1">Slide 1</div>
<div class="mySlideElements" style="background: yellow">Slide 2</div>
<div class="mySlideElements" style="background: green">Slide 3</div>
<div class="mySlideElements" style="background: purple">Slide 4</div>
<script type="text/javascript">
    var slideElements = $$('.mySlideElements');
    slideElements.set('slide');

    for(var i = 1; i < slideElements.length; i++) (function(c1,c2){
        c1.get('slide').chain(function(){c2.slide()});
    })(slideElements[i-1],slideElements[i]);

</script>

<input type="button" onclick="$('slide1').slide()" value="slide"/>

调用get('slide')返回在每个元素上设置的 Fx.Slide 对象，然后您可以将其链接到函数。我的 Mootools-fu 不够强大，无法弄清楚如何将它直接链接到slide下一个元素的属性（这应该是一个函数，但它似乎不起作用），所以我最终得到了你的匿名函数看看里面的chain()电话，这几乎一样好。循环闭包function(c1,c2)是必要的，以防止本地i循环变量在调用链接的匿名函数时超出范围。

slide当第一个元素的功能被触发时，它被设置为连锁反应。如果您需要在单击任何元素时将整个事件级联，您可能希望将每个元素的onClick事件设置为触发第一个元素slide()而不是它们自己的事件。

无论如何，上面的代码是一个工作示例。我希望结果是你想要的。

于 2010-01-06T06:43:42.077 回答
0

在我看来，这是一种更好的/“mootoolsy”方式。FX 实例提供了两种可以使用的东西：链接：“链”和 onComplete：函数。所以是这样的：

var slideEls = function(els) {
    if (!els.length)
        return;

    var lastEl = els.getLast();    
    lastEl.set("slide", {
        duration: "long",
        link: "chain",
        onComplete: function() {
            els.erase(lastEl);
            slideEls(els);
        }
    }).slide("out");
};

slideEls($$('div.mySlideElements'));

这里的工作示例：http: //mootools.net/shell/GmUpM/

这将使用无限长度的元素来滑出

于 2010-01-06T09:17:43.990 回答
0

试试这个：

$$('.mySlideElements')
    .set('slide', {
        onComplete: function (el) 
        {
            if (el = el.getParent().getNext ('.mySlideElements'))
                el.slide ('out');
        }
    })
    [0].slide ('out');

它只要求.mySlideElements是直系兄弟姐妹

于 2010-01-06T09:50:17.560 回答