CODEWITHSUNDEEP
jquery
Nikki
Nikki

Reputation: 311

Make a figure blink/flash in jQuery

As it says in the title I was wondering if you can make a square or a circle blink/flash in jQuery? I already know how it works in CSS but the problem is that I can't call the CSS animation in jQuery, so long story short I need to make it blink/flash in jQuery. This is the whole code so far:

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

Upvotes: 1

Views: 411

Answers (1)

Banana
Banana

Reputation: 7463

just assign the animation via jQuery like this:

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

or, use jQuery animate with jQuery UI to animate the background color:

$(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);
});
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;
 }
<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>

UPDATE:

here is your code from the question animated using jQuery: Fiddle

Upvotes: 1

Related Questions