Question

我正在查看JQuery的Progressbar的源代码：https://jqueryui.com/progressbar/#label。我注意到他们声明position的{{1}}为progress-label。这似乎并不是最佳的，因为那时你必须硬编码一个幻数，使其在absolute中居中。他们只是说progressbar，但这并不是真正的中心，你可以在这里看到：https://jsfiddle.net/zdfu5r9z/8（代码直接取自前面提供的链接）。但是，当我尝试使用left: 50%时，文本现在居中，但它隐藏了position: relative; text-align: center;的动画，如http://jsfiddle.net/zdfu5r9z/5/所示。任何帮助将非常感谢我如何使文本居中并使动画工作。谢谢！

Answer 1

您可以这样做：

＆＃13;

$(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 );
});

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery Progressbar文本隐藏了Progressbar的动画

1 个答案: