Question

我在快速连续中动画三个元素，因此它们的淡入淡出似乎重叠。循环，使用setInterval，并使用setTimout交错，我当前的代码如下所示：

标记：

var updater = function(el){
    var $el = $(el);
    $el.fadeTo(500, 0, function(){
        // Update content here
        $el.fadeTo(500, 1);
    })
};

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i, el){
        var $this = $(el);
        setTimeout( function(){
            updater($this)
        }, 0 + ( i * 250 ));
    });
};

动画：

var updater = function(el){
    var $el = $(el);
    $el.fadeTo(500, 0, function(){
        // Update content here
        $el.fadeTo(500, 1);
    })
};

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i, el){
        var $this = $(el);
        setTimeout( function(){
            updater($this)
        }, 0 + ( i * 250 ));
    });
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contents">
    <p class="content">Lorem ipsum dolor sit amet, vidisse deseruisse vim an, mel ad dolores accusata deseruisse. Integre civibus comprehensam his at. Tibique iracundia cu vel, has at luptatum scriptorem. Autem causae omnesque eos te. Mel ad reque noster. Feugiat eleifend maiestatis ut per, maluisset consulatu est ea.</p>
    <p class="content">Sea no cibo praesent. Partem scribentur te eum. Ius in odio mucius, praesent delicatissimi vis ei, mel eu iuvaret honestatis. Cu tantas omnium necessitatibus eam.</p>
    <p class="content">Ut mea ubique putant perfecto. Debet audiam electram vis eu, doctus contentiones ea usu. Cu qui legere possim corrumpit. Quo utinam disputando te, vix decore accusam reprehendunt ex, vis eu mutat delenit. Mel ad nulla vivendum, reprimique voluptatibus et sea.</p>
</div>

＆＃13;

<HTML>
<HEAD>
    <TITLE>GPM ConnectionModul Systems Configuration</TITLE>
    <LINK rel="stylesheet" href="GPM_SFTPConnector.css" type="text/css">

    <script>


        function systemAnzeigen(systemid) {
            var elms = document.getElementsByClassName("connectionClass");

            for (i = 0; i < elms.length; i++) {
                if (elms.item(i).id == systemid) {
                    elms.item(i).style.display = 'block';
                } else {
                    elms.item(i).style.display = 'none';
                }

            }
        }


        function systemAendern(systemid) {
            alert("System aendern: " + systemid);
        }

        function systemLöschen(systemid) {
            alert("System loeschen: " + systemid);
        }

    </script>
</HEAD>
<BODY>

    <strong>Error listing systems: </strong> [ISC.0049.9009] Missing required property switch at 'unlabeled BRANCH'<P>

        <strong>Konfigurierete Systeme</strong>

        <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
            <TR>
                <TH>System-ID</TH>
                <TH>Ändern</TH>
                <TH>Löschen</TH>
            </TR>

            <TR>
                <TD><a href="javascript:systemAnzeigen('system1');">system1</a></TD>
                <TD><img onclick="javascript: systemAendern('system1');" src="edit.gif" /></TD>
                <TD><img onclick="javascript: systemLoeschen('system1');" src="delete.gif" /></TD>
            </TR>

            <TR>
                <TD><a href="javascript:systemAnzeigen('system2');">system2</a></TD>
                <TD><img onclick="javascript: systemAendern('system2');" src="edit.gif" /></TD>
                <TD><img onclick="javascript: systemLoeschen('system2');" src="delete.gif" /></TD>
            </TR>
        </TABLE>


        <div class="connectionClass" id="system1" style="display: none;">

            <h4>system1</h4>

            <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                <TR>
                    <TH>Connection-ID</TH>
                    <TH>Protokoll</TH>
                    <TH>Mapping</TH>
                </TR>

                <TR>
                    <TD>poller1</TD>
                    <TD>SFTP</TD>
                    <TD></TD>

                </TR>

                <TR>
                    <TD>soapConnection1</TD>
                    <TD>SOAP</TD>
                    <TD>mymapping</TD>

                </TR>
            </TABLE>

            <div class="connectionClass" id="system2" style="display: none;">

                <h4>system2</h4>

                <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                    <TR>
                        <TH>Connection-ID</TH>
                        <TH>Protokoll</TH>
                        <TH>Mapping</TH>
                    </TR>

                    <TR>
                        <TD>RestConnection1</TD>
                        <TD>REST</TD>
                        <TD></TD>

                    </TR>
                </TABLE>
            </div>

    <P><a href="index.html">Home</a><P>

＆＃13;

jsfiddle

在大多数情况下，小提琴似乎不会很难，但在我的真实世界的例子中，它会受到不稳定的动画（通常大约3-10 fps）的影响。页面上方还有一个自动滑块，这可能会导致问题。

如何解决这个问题？

Answer 1

最好使用jQuery的delay方法进行计时效果。我会转储您的updater方法并简化updateReviews方法：

var reviewTimer = window.setInterval(updateReviews, 3000);

function updateReviews() {
    $.each( $('.content'), function(i){
        $(this).stop(true, true).delay(i * 250).fadeTo(500, 0, function(){
            // update content here
            $(this).fadeTo(500, 1);
        });
    });
};

这是fiddle;

使用setTimeout的交错动画很不稳定

1 个答案: