如何重置 JQueryUI 效果动画？
我有两个不同的计时器条，每个条都在 5 秒内结束。但是当我尝试停止并重置第一个计时器时，它不会重置，只会从停止的地方继续。
期望的行为： Timer1 启动 用户按下按键 Timer1 中途停止 Timer2 启动 Timer2 到期 Timer1 重置为 100% 并启动
这是 timer1 启动的方式：
function StartTimer1(){
$("#timer-bar").show().width("100%");
$("#timer-bar").hide({
effect: "blind",
easing: "linear",
duration: 5000,
direction: "left",
complete: function () {
//do stuff
}
});
}
然后当有人按下一个键时，我跑
//Stop timer1
$("#timer-bar").stop(true, false);
//Start timer2
$("#answer-timer-bar").hide({
effect: "blind",
easing: "linear",
duration: 5000,
direction: "left",
complete: function () {
//do stuff
}
});
然后在 timer2 到期后，我按下了另一个再次调用 StartTimer1() 的键。即使我在开始动画之前将宽度重置为 100%，它也会从它第一次停止的地方继续。我阅读了有关队列的信息并认为这是我的答案，但我尝试为每个计时器选项添加唯一的队列名称，但每当我这样做时，计时器由于某种原因永远不会启动。当我将队列设置为 true 时也是如此。我在调用 Stop() 时尝试了 clearQueue 和 jumpToEnd 参数的不同选项，但似乎无法获得我想要的行为。
任何帮助，将不胜感激。谢谢。
JSFiddle：https ://jsfiddle.net/58rzg6w0/7
慕容森浏览 166回答 4
4回答
-
慕容3067478
隐藏和显示方法上的动画？根据我的研究和这篇 stackoverflow 帖子，如果我们使用and$(selector).animate()而不是， 我们将对动画有更多的控制。$(selector).hide()$(selector).show()将容器元素用于动画我已经分离了 css 样式并为动画本身添加了叠加层以防止容器折叠（如果是，元素将没有高度display: none）。这可能有用或没有用，这取决于您的目标。您仍然可以隐藏它们，因此使用此方法没有任何缺点。将动画与容器分开可能很有用。恢复动画的时间问题如果其中一个计时器恰好在动画期间停止并恢复，则动画仍将具有相同的持续时间“更短的距离”，从而导致动画速度变慢。但是，如果我们重置 的动画timer1，就像您在示例中所做的那样，那么这不是问题，否则，我们必须根据动画进度和总动画长度调整动画持续时间（您可以在下面的脚本）。只是为了好玩 - 显示时间通常情况下，计时器会显示时间，因此我将动画的持续时间添加到叠加层上。这只是您可能想要添加的简单添加（加上样式）。动画的持续时间可以通过数据持续时间（以毫秒为单位）在计时器元素上设置。$('document').ready(function() { ResetAll();});function TimeLeft(id, initialTime) { const $timer = $('#' + id); const $overlay = $timer.find('.overlay'); const percentageToGo = (parseInt($overlay.css('width')) / parseInt($timer.css('width'))); return percentageToGo * initialTime;}function StartTimer(id, onComplete = null) { const $timer = $('#' + id); const $overlay = $timer.find('.overlay'); const duration = $timer.data('duration'); const time = TimeLeft(id, duration); $overlay.animate({ width: '0%' }, { duration: time, easing: 'linear', step: function() { $overlay.html(Math.round(TimeLeft(id, duration)) / 1000); }, complete: function() { // $timer.css('display', 'none'); // remove all comments to hide the timer element completly $overlay.html(''); if (onComplete && typeof onComplete === 'function') { onComplete(); } } });}function StopTimer(id) { $('#' + id + ' .overlay').stop(true, false);}function ResetTimer(id) { const $timer = $('#' + id); const $overlay = $timer.find('.overlay'); $overlay.stop(true).css('width', '100%'); // $timer.css('display', 'block'); // remove all comments to hide the timer element completly $overlay.html(Math.round(TimeLeft(id, $timer.data('duration'))) / 1000);}function StopTimer1AndStartTimer2() { ResetTimer('timer1'); ResetTimer('timer2'); StartTimer('timer2', function() { // $('#timer2').css('display', 'none'); // remove all comments to hide the timer element completly StartTimer('timer1'); });}function ResetAll() { ResetTimer('timer1'); ResetTimer('timer2'); // $('.timer').css('display', 'block'); // remove all comments to hide the timer element completly}.timer { position: relative; height: 30px; width: 100%; z-index: 1;}.overlay { color: white; position: absolute; width: 100%; top: 0; left: 0; bottom: 0; z-index: -1;}#timer1 .overlay { background-color: red;}#timer2 .overlay { background-color: blue;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><div id="timer1" data-duration="5000" class="timer"> <div class="overlay"></div></div><div id="timer2" data-duration="3000" class="timer"> <div class="overlay"></div></div><p>This first button is probably what you want, the rest is extra:</p><button onclick="StopTimer1AndStartTimer2();">Stop Timer1 - Reset Timer1 - Start Timer2 - on complete Start Timer2</button><button onclick="StartTimer('timer1');">Start/Resume Timer1</button><button onclick="StartTimer('timer2');">Start/Resume Timer2</button><button onclick="StartTimer('timer1'); StartTimer('timer2');">Start/Resume All</button><button onclick="StopTimer('timer1');">Stop Timer1</button><button onclick="StopTimer('timer2');">Stop Timer2</button><button onclick="StopTimer('timer1'); StopTimer('timer2');">Stop All</button><button onclick="ResetTimer('timer1');">Reset Timer1</button><button onclick="ResetTimer('timer2');">Reset Timer2</button><button onclick="ResetAll();">Reset All</button> -
料青山看我应如是
您可以在开头.clone() timer1 并在 timer2 效果结束时使用.replaceWith()将其重置为初始值：var initialValue = null;function StartTimer1() { if (initialValue == null) { initialValue = $("#timer1").clone(); } else { $("#timer1").replaceWith(initialValue); } $("#timer1").show().width("100%"); $("#timer1").hide({ effect: "blind", easing: "linear", duration: 5000, direction: "left", complete: function () { } });}function StopTimer1(){ $("#timer1").stop(true, false); $("#timer2").hide({ effect: "blind", easing: "linear", duration: 2000, direction: "left", complete: function () { StartTimer1(); } });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="timer1" style="height:30px; width:100%; background-color:red"></div><div id="timer2" style="height:30px; width:100%; background-color:blue"></div>Click First button, then click second, then click first again<button onclick="StartTimer1();">Start Timer1</button><button onclick="StopTimer1();">Stop Timer1 and Start Timer2</button> -
三国纷争
用于.stop(true, true)去除占位符 ( .stop( [clearQueue ] [, jumpToEnd ] ))。jumpToEnd将隐藏它，所以再次显示它，并在 timer2 结束后回调它： function StartTimer1() { $("#timer1").hide({ effect: "blind", easing: "linear", duration: 5000, direction: "left", complete: function() {} });}function StopTimer1() { $("#timer1").stop(true, true).show(); $("#timer2").hide({ effect: "blind", easing: "linear", duration: 2000, direction: "left", complete: function() { StartTimer1() } });}按下按钮后立即重置红色条的示例：function StartTimer1() { $("#timer1").hide({ effect: "blind", easing: "linear", duration: 5000, direction: "left", complete: function() {} });}function StopTimer1() { $("#timer1").stop(true, true).show(); $("#timer2").hide({ effect: "blind", easing: "linear", duration: 2000, direction: "left", complete: function() { StartTimer1() } });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="timer1" style="height:30px; width:100%; background-color:red"></div><div id="timer2" style="height:30px; width:100%; background-color:blue"></div>Click First button, then click second, then click first again<button onclick="StartTimer1();">Start Timer1</button><button onclick="StopTimer1();">Stop Timer1 and Start Timer2</button>如果你想在蓝色完成动画后重置红色条：蓝色条完成后使用.stop(true, false);并重置样式 ( )。.attr("style"function StartTimer1() { $("#timer1").hide({ effect: "blind", easing: "linear", duration: 5000, direction: "left", complete: function() {} });}function StopTimer1() { $("#timer1").stop(true, false); $("#timer2").hide({ effect: "blind", easing: "linear", duration: 2000, direction: "left", complete: function() { $("#timer1").attr("style", "height:30px; width:100%; background-color:red"); StartTimer1(); } });}function StartTimer1() { $("#timer1").hide({ effect: "blind", easing: "linear", duration: 5000, direction: "left", complete: function() {} });}function StopTimer1() { $("#timer1").stop(true, false); $("#timer2").hide({ effect: "blind", easing: "linear", duration: 2000, direction: "left", complete: function() { $("#timer1").attr("style", "height:30px; width:100%; background-color:red"); StartTimer1(); } });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="timer1" style="height:30px; width:100%; background-color:red"></div><div id="timer2" style="height:30px; width:100%; background-color:blue"></div>Click First button, then click second, then click first again<button onclick="StartTimer1();">Start Timer1</button><button onclick="StopTimer1();">Stop Timer1 and Start Timer2</button> -
慕桂英3389331
重置动画：// Remove style$("#timer-bar").removeAttr('style');// Set initial width$("#timer-bar").show().width("100%");要么：$('#timer-bar').stop(true).css('width', '100%');
随时随地看视频慕课网APP
相关分类
JavaScript