0

我正在使用语义 UI 转换（css，js），并且有一些 html 对象要淡入： 

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding1 transition">
<div id="div3" class="fadding1 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

然后我可以通过从 jQuery 脚本调用按顺序淡化它们： 

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400
        });

因此，它们开始依次从div1淡入到div5，一个接一个。现在，假设我希望它们以div1、div4、div5、div2和div3的顺序淡化。我尝试了onComplete，有两个不同的类，如下所示，但它在每个单独的组件消失后触发。

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding2 transition">
<div id="div3" class="fadding2 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

和 jQuery 脚本： 

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400,
            onComplete: function() {
                $('.fadding2').transition({
                    animation: 'fade',
                    duration: 1500,
                    interval: 400
                });
        });

所以制作不同的类 (1,4,5) 和 (2,3) 没有帮助。最后一个解决方案是制作一个级联功能树，这是不可取的，因为我有很多组件（不仅仅是五个）。

4

1 回答 1

0

这可能是最好的解决方法。使用第一个淡入淡出组中最后一项的 id。在onComplete函数中，检查它是否引用了该 id，然后第二个衰落组开始。 

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding2 transition">
<div id="div3" class="fadding2 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

检查 id，并开始第二个淡入淡出操作： 

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400,
            onComplete: function() {
                if(this.id=="div5"){
                    $('.fadding2').transition({
                        animation: 'fade',
                        duration: 1500,
                        interval: 400
                    });
                }
        });
于 2018-02-10T16:38:44.403 回答