我的html
<fieldset class="field_one">
<legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
<div id="message">...............</div>
<img src="./image/index1.png" id="mainImage" alt="">
<div class="button"><a href="#" id="btnImage">?Generate Character!</a></div>
<div class="button"><a href="#" id="btnName">?Generate Nickname!</a></div>
</fieldset>
我的 CSS 關鍵幀
@keyframes rainbow {
0% {color:red;}
25% {color:blue;}
50% {color:gold;}
75% {color:greenyellow;}
100% {color:red;}
}
我的 jquery js
$('fieldset').hover(function() {
$(this).css({"animation":"rainbow","font-size":"18pt"}, 1000);
});
是為了我需要做的作業，但我真的找不到一種方法讓它與 jquery 一起作業（我知道使用純 css 更容易）
uj5u.com熱心網友回復：
使用您的影片規則設定一個類，然后使用 addClass()
$('fieldset').hover(function() {
$(this).addClass('rainbowAnim');
});@keyframes rainbow {
0% {color:red;}
25% {color:blue;}
50% {color:gold;}
75% {color:greenyellow;}
100% {color:red;}
}
.rainbowAnim {
-webkit-animation: rainbow 5s infinite;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="field_one">
<legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
<div id="message">...............</div>
<img src="./image/index1.png" id="mainImage" alt="">
<div class="button"><a href="#" id="btnImage">?Generate Character!</a></div>
<div class="button"><a href="#" id="btnName">?Generate Nickname!</a></div>
</fieldset>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/433730.html