Question

我有以下问题。

下面的功能首先填写一个百分比栏，然后在同一个栏上显示文字，（显示＆＃34;第一个文字＆＃34;然后闪烁2次然后显示＆＃34;第二个文字＆＃34 ;）

我想要的是，每次眨眼都会更新文本，结果就是。

＆＃34;第一个文字＆＃34; - 眨眼 - ＆＃34;另一个文字＆＃34; - 闪烁 - ＆＃34;一个不同的文字＆＃34; - 闪烁 - ＆＃34;第二个文字＆＃34;

这可能吗？我一直在尝试搞乱它，但我无法使它发挥作用。

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在内部创建一个队列，所以这将起作用。

除此之外，这不是它应该工作的方式，这也是不方便的。如果你还想要一个文本，你必须为很简单的事情改变很多代码。在编码时，您应该在脑海中保持维护。

这可能是朝着正确的方向发展：

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);

用于同时更新文本和闪烁的功能

1 个答案: