javascript - 同时更新文本和闪烁的功能

Question

我遇到以下问题。

下面的函数首先填充百分比栏，然后在同一栏上显示文本(显示“第一个文本”，然后闪烁两次，然后显示“第二个文本”)。

我想要的是在每次眨眼时它都会更新文本，以便得到结果。

“第一个文本” - 闪烁 - “另一个文本” - 闪烁 - “另一个文本” - 闪烁 - “第二个文本”

这可以做到吗？我一直在尝试搞乱它，但我没能让它发挥作用。

function updateStatusBar() {
    if (i < values.length-1) {
        i++;
        $(".progress-bar-color").css({width: parseInt(values[i].percent)+'%'});
        $('.status-percent').html(values[i].percent + '%');
        $('.status-text').html(values[i].text);
    } else {
        clearInterval(intId);
        $('.status-percent').css('visibility', 'hidden');


        $('.status-text').html('<strong>First text</strong>').addClass('align').fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500, function() {
            $('.status-text').html('<strong>Second text</strong>').addClass('searching');
            $('.status-text').fadeIn(500, function () {
                window.setTimeout(function() {
                    $('.outer1').fadeOut(500, function() {
                        $('.outer1').remove();
                        $('.outer2').fadeIn(500);
                    });
                }, 5000);
            });
        });

        $('.progress-bar').addClass('progress-bar-red');
    }
}

提前致谢

Answer 1

您的代码方式不正确(.fadeIn(500).fadeOut(500).fadeIn(5‌​00))。它们不应该像现在一样被链接起来，所有的淡入淡出都是在同一时刻启动的，这只有效，因为 jQuery 在内部创建了一个队列，所以这才有效。

除此之外，这不是它应有的工作方式，而且也不方便。如果您想要多 1 个文本，则必须为非常简单的内容更改大量代码。编码时，您应该牢记维护。

这可能是朝着正确方向的插入:

var texts2loop = ['aaa','bbb','ccc']; // all the values we want    

function loopThroughTexts( $element, texts ){
    var text2show = 0;

    var textLooper = setInterval(function(){
        // Fade the bar out,
        $element.fadeOut(500, function(){
            // when animation is complete, change the text:
            $(this).html( texts[text2show]);
            // Fade back in:
            $(this).fadeIn(500);
            // Set the counter +1 so next round does next text
            texts2show++;
           // If we've had all texts, stop the interval:
            if( texts2show == texts.length ){
                clearInterval(textLooper);  
                // If you want to perform some functionallity when the texts are done, 
                // You could place that right here
            }
        });
    }, 5000);
}


loopThroughTexts( $('.status-text'), texts2loop);