Question

我在.js中有一个进度条，当从0加载到100％时会显示一条消息，这是代码的一部分：

 $('#x00srch-status-current').html('Connecting...'); 
 $('#x00srch-progress').width('0%'); 
 $('#x00srch-progress').animate({
    width: '100%'
} )

如何在特定进度条宽度上显示不同的消息？例如：

如果progress_width=20%，则status="Connecting..."

progress_width=50%，然后是status="Getting results..."

progress_width=82%，然后是status="The results will come up..."

Answer 1

您可以使用step功能来实现您的需求。这是一个在动画的每一步（奇怪）调用的函数：

如下所示：

$('#x00srch-status-current').html('Connecting...');
$('#x00srch-progress').width('0%').animate({width:"100%"}, {
    duration:2000,
    step:function(n,fx){ 
        var status = "Connecting...";
        status = n >= 50 ? "Getting results..." : status;
        status = n >= 82 ? "The results will come up..." : status;
        $('#x00srch-status-current').html(status);
    }
});

JSFiddle

Answer 2

我有两个想法：

1）jquery.animate的默认持续时间为400毫秒，您没有定义任何其他内容，因此您可以将状态设置为：

setTimeout(function() {
  status = "Connecting";
}, 80); //80ms are 20% of 400ms

setTimeout(function() {
  status = "Getting Results";
}, 200); //200ms are 50% of 400ms    

setTimeout(function() {
  status = "Getting Results";
}, 328); //328ms are 50% of 400ms

您还可以将动画持续时间存储在变量中，并计算百分比。

2）在步骤中制作动画。首先是20％，更改消息，然后更改为50％，更改消息等。使用animate回调函数。

如何在特定宽度上显示不同的消息？

2 个答案: