隱藏和顯示方法上的動畫？
根據我的研究和這篇 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>
