Question

正如标题中所说，我想知道你是否可以在jQuery中制作正方形或圆形闪烁/闪光灯？我已经知道它在CSS中是如何工作的，但问题是我无法在jQuery中调用CSS动画，所以长话短说我需要在jQuery中使它闪烁/闪烁。这是到目前为止的整个代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8 />
      <title>Conclusion2</title>
      <style>
        p {
           font-family: High Tower Text;
           font-size: 25px;
           margin-top: 0px;
           margin-bottom: 0px;
           margin-left: 0px;
           margin-right: 0px;
        }
      .first-child {
        height: 200px;
        width: 200px;
        background: white;
        border-radius: 0%;
        margin-top: 150px;
        margin-bottom: 0px;
        margin-left: 500px;
        margin-right: 0px;
       -webkit-animation: myfirst 1s;
       animation: myfirst 1s;
      }
       @-webkit-keyframes myfirst {
          0% {background: white;}
         20% {background: white;}
         40% {background: white;}
         60% {background: white;}
         80% {background: white;}
        100% {background: red;}
      }
      .first-parent {
        margin-top: 50px;
        margin-bottom: 0px;
        margin-left: 100px;
        margin-right: 0px;
      }
      .second-parent {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 415px;
        margin-right: 0px;
      }
      </style>
   </head>
   <body>
       <p>
         One of these figures will pop up for a short moment<br />
         Press the button to see how it works:
       </p>
       <div class="first-child"></div>

       <button class="first-parent" onclick="window.location.href='Conclusion3.html'">Next</button>

       <button class="second-parent" onclick="window.location.href='Conclusion2.html'">Click me !</button>
    </body>
</html>

Answer 1

只需通过jQuery分配动画：

//this will run on page load
$(function(){
    //target all 'p' elements
    //assign the animation
    $("p").css({
        "animation":"myfirst 1s",
        "-webkit-animation":"myfirst 1s"
    });
});

或者，使用jQuery动画和jQuery UI来设置背景颜色的动画：

＆＃13;

$(function () {
    //set time out to fire after 800 milliseconds
    setTimeout(function () {
        //turn red, duration 100ms
        $("p").animate({
            backgroundColor: "red"
        }, 100, function () {
            //callback function, fires when the animate id done.
            //here we just call another animate to return color back to white
            $("p").animate({
                backgroundColor: "white"
            }, 100);
        });
    }, 800);
});

＆＃13;

p {
     font-family: High Tower Text;
     font-size: 25px;
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     margin-right: 0px;
 }
 .first-child {
     height: 200px;
     width: 200px;
     background: white;
     border-radius: 0%;
     margin-top: 150px;
     margin-bottom: 0px;
     margin-left: 500px;
     margin-right: 0px;
     -webkit-animation: myfirst 1s;
     animation: myfirst 1s;
 }
 @-webkit-keyframes myfirst {
     0% {
         background: white;
     }
     20% {
         background: white;
     }
     40% {
         background: white;
     }
     60% {
         background: white;
     }
     80% {
         background: white;
     }
     100% {
         background: red;
     }
 }
 .first-parent {
     margin-top: 50px;
     margin-bottom: 0px;
     margin-left: 100px;
     margin-right: 0px;
 }
 .second-parent {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 415px;
     margin-right: 0px;
 }

＆＃13;

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<body>
    <p>One of these figures will pop up for a short moment
        <br />Press the button to see how it works:</p>
    <div class="first-child"></div>
    <button class="first-parent" onclick="window.location.href='Conclusion3.html'">Next</button>
    <button class="second-parent" onclick="window.location.href='Conclusion2.html'">Click me !</button>
</body>

＆＃13;

<强>更新

这是您使用jQuery动画问题的代码： Fiddle

在jQuery中使图形闪烁/闪烁

1 个答案: