一个具体的问题,但是我有一个进度条,从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-duration
和width
的第一个更改几乎不存在,也从未应用过,因为所有更改都是在脚本末尾完成的。如果您读取元素的
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'
的原因。