我看到很多答案都說要使用 jquery-uianimate()函式，但這需要匯入整個其他庫來翻轉顏色。
有沒有辦法只使用 jQuery 和 CSS？
問題：當我單擊一個按鈕時，我希望另一個元素將顏色閃爍為藍色，然后再變為紅色（紅色是原始顏色）。每次用戶單擊按鈕時，這種顏色變化行為都會重復。
我已經能夠讓它改變顏色為藍色：
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
});
有沒有辦法可以將顏色改回紅色？像這樣簡單的東西：
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
$(".other-element").css("transition", "color .6s").css("color", "red");
});
...元素在 0.3 秒后變為藍色，然后在 0.6 秒后變為紅色？注意，上面的代碼不起作用，它只顯示紅色（永遠不會變成藍色）。
uj5u.com熱心網友回復：
我建議完全不用第三方庫。在這里，我創建了一個 css 影片，并在一個簡單的 js 代碼的幫助下，在開頭添加了一個影片類，然后在影片結束時將其洗掉。
const button = document.querySelector('.my-button');
const other = document.body;
button.addEventListener('click', function() {
other.classList.add('active');
});
other.addEventListener('animationend', function() {
other.classList.remove('active');
});body {
margin: 0;
background-color: #f00;
display: flex;
min-height: 100vh;
}
.my-button {
margin: auto;
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}
.my-button:hover {
background-color: #ddd;
}
.active {
animation: bganim .6s;
}
@keyframes bganim {
0,
100% {
background-color: #f00;
}
50% {
background-color: #00f;
}
}<button class="my-button">Click me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515202.html
上一篇：如何在輸入值后向輸入添加文本