无法找到通过 Jquery 使用关键帧动画的方法（.css、.animate）

发布于 2025-01-10 04:17:04 字数 980 浏览 0 评论 0原文

我的 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 会更容易）

原文

My 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>

My css keyframe

@keyframes rainbow {
    0%   {color:red;}
    25%  {color:blue;}
    50%  {color:gold;}
    75%  {color:greenyellow;}
    100% {color:red;}
}

My jquery js

$('fieldset').hover(function() {
        $(this).css({"animation":"rainbow","font-size":"18pt"}, 1000);
});

Is for a work i need to do and i cant really find a way to make it work with jquery (i know that is way easier with plain css)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

偏爱自由 2025-01-17 04:17:05

使用您的动画规则设置一个类，然后使用 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>

Set a class with your animation rules and then use 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>

回复收藏 0 原文

~没有更多了~