jQuery Progressbar文本隐藏Progressbar的动画

Question

我正在查看 JQuery 进度条的源代码:https://jqueryui.com/progressbar/#label .我注意到他们将 progress-label 的 position 声明为 absolute。这似乎不是最佳选择，因为您必须硬编码一个魔数(Magic Number)以使其在 progressbar 中居中。他们只是说 left: 50% 但这并不是真正居中，正如您在这里看到的:https://jsfiddle.net/zdfu5r9z/8 (代码直接取自先前提供的链接)。但是，当我尝试使用 position: relative; text-align: center;，文本现在居中但它隐藏了 progressbar 的动画，如此处所示 http://jsfiddle.net/zdfu5r9z/5/ .关于如何使文本居中并使动画工作的任何帮助将不胜感激。谢谢!

Answer 1

你可以这样做:

$(function() {
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
    
    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        },
        complete: function() {
            progressLabel.text( "Complete!" );
        }
    });

    function progress() {
        var val = progressbar.progressbar( "value" ) || 0;
        
        progressbar.progressbar( "value", val + 2 );
        
        if ( val < 99 ) {
            setTimeout( progress, 80 );
        }
    }
    setTimeout( progress, 2000 );
});

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="progressbar"><div class="progress-label">Loading...</div></div>