一个具体的问题,但是我有一个进度条,从100%0%超过10秒钟,我想在单击按钮时将其跳到任意百分比,然后从那里继续。到目前为止,这是一个小提琴:

https://jsfiddle.net/41o6xvyt/

除了我必须使用超时和一些即时css切换技巧才能使其正常工作(尽管这样,它可能在较慢的计算机上可能无法工作,并且损失了很多毫秒)之外,这种方法仍然有效。我想知道是否有更好的方法不需要超时或此类破解即可工作。

最佳答案

之所以需要setTimeout()是因为更改是由浏览器缓存的,并且仅在整个脚本执行后才应用。 setTimeout允许一个脚本执行,然后在超时后执行另一个脚本。这样就可以应用CSS更改。在您的示例中,如果我们仅调用b(),这就是发生的情况:

$("#first").css({ 'transition-duration' : '0s' });  // Cache change1
$("#first").css("width","50%");                     // Cache change2
$("#first").css({ 'transition-duration' : '5s' });  // Overwrite change1
$("#first").css("width", "0%");                     // Overwrite change2
// Apply style changes

实际上,对transition-durationwidth的第一个更改几乎不存在,也从未应用过,因为所有更改都是在脚本末尾完成的。

如果您读取元素的offsetHeight属性,它将刷新缓存并应用更改,这将强制应用对CSS所做的更改。

您还需要做的是更改进度条width,以在CSS中设置而不是将其设置为属性(因为刷新仅影响CSS而不直接影响style中的项目)。
$("#report_jump").click(function(){
    $("#first").css({ 'transition-duration' : '0s' });
    $("#first").css("width","50%");
    $("#first")[0].offsetHeight; // flush CSS, the above changes will now be applied
    b();
});

Fiddle Example

注意

“即时css切换欺骗”并不是真正的欺骗。我们只想将width更改为50%,然后在0秒内完成即可。这就是为什么需要'transition-duration' : '0s'的原因。

10-05 21:02
查看更多