Performing keyframes by click

Question

I have bubbles that pop up using keyframes, but they are buttons that I also want to disappear when pressed and then restart automatically with 0% . I called onmousedown and onmouseup for this, but it does not seem to work. Any ideas?

 $(document).ready() { function Bubbles() { $(".bubble_cluster_one").css("opacity", "0"); } function Bubbles2() { $("bubble_cluster_one").css("top": "400px", "opacity": "1"); } } 

 .bubble_cluster_one { position: absolute; margin: 0; padding: 0; -webkit-animation: bubble_cluster_one 8s infinite; left: 150px; z-index: +1; } .bubble_cluster_one input { width: 40px; height: 60px; } @-webkit-keyframes bubble_cluster_one { 0% { top: 400px; } 100% { top: -70px; } } 

 <div class="bubble_cluster_one"> <input type="image" src="bubbles_1.png" alt="button" onmousedown="Bubbles()" onmouseup="Bubbles2()"> </div> 

Answer 1

The passage that was mentioned in the question had several problems:

• JQuery libraries were not included.
• $(document).ready wrapper was not written correctly (it should be written as indicated in Roamer-1888's answer, and event handlers should be directly connected via JS. Actually, this is best practice instead of using the built-in attributes.

Besides these two, you should note that you need to pay attention to CSS animation:

• As soon as the endless animation begins, it continues to work until the animation is removed from the element. So, although it was hidden using opacity: 0 , the animation worked in the background.
• To restart the CSS animation, the only possible way is to remove the element animation and add it back after the delay.

• The above cannot be done with the mousedown and mouseup events, because when the animation is deleted (on mousedown ), the element returns to its original position, and the probability is very high that the mouse pointer is no longer above the element. This means that the mouseup event will not be fired because it only fires when the mouse is still above the element.

  From jQuery website : the mouseup event is dispatched to an element when the mouse pointer is over the element and the mouse button is released.

• So, the solution is as follows:

  • Use a specific class only for animation properties, add this additional class to the element. This is optional, but makes it easy to add or remove animations by simply adding / removing class methods.
  • Use the click event for the element, first remove the animation class, set opacity to 0 to hide the element, and after a short delay (using setTimeout ) add the animation class back to the element and set opacity to 1.

 $(document).ready(function() { $(".bubble_cluster_one input").on('click', function() { $(".bubble_cluster_one").removeClass("animation"); $(".bubble_cluster_one").css("opacity", "0"); setTimeout( function() { $(".bubble_cluster_one").addClass("animation"); $(".bubble_cluster_one").css("opacity", "1"); }, 100); }); }); 

 .bubble_cluster_one { position: absolute; margin: 0; padding: 0; left: 150px; z-index: 1; } .animation { animation: bubble_cluster_one 8s infinite; } .bubble_cluster_one input { width: 40px; height: 60px; } @keyframes bubble_cluster_one { 0% { top: 400px; } 100% { top: -70px; } } 

 <!-- prefix free library is only to avoid vendor prefixes --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bubble_cluster_one animation"> <input type="image" src="bubbles_1.png" alt="button"> </div> 

---

Just adding top: 400px to mouseup will not work, because when animating CSS, the animation fully controls the properties it uses. Only rules that can override animations are those that have !important . It is generally incorrect to use !important when this can be avoided, and therefore I will not recommend this method of restarting the animation.

From Animation Spec : CSS animations affect computed property values. During animation, the computed value for the property is controlled by the animation. This overrides the value specified in the regular styling system. Animation overrides all the usual rules, but is overridden by important rules.

Answer 2

You have a broken, broken template.

First, the correct shell should be:

 $(document).ready(function() { ... }); //or $(function() { ... }); 

But if you do, then Bubbles() and Bubbles2() not available from event handlers attached as HTML attributes.

So attach handlers in javascript:

 $(function() { function Bubbles() { $(this).css("opacity", "0"); } function Bubbles2() { $(this).css("top": "400px", "opacity": "1"); } $(".bubble_cluster_one input") .on('mousedown', Bubbles) .on('mouseup', Bubbles2); }); 

Alternatively, send the bubble directly onto the screen, not confused with opacity:

 $(document).ready(function() { $(".bubble_cluster_one input").on('mousedown', function() { $(this).css({ "top": "400px" }); }); }); 

Note. Both examples differ from the original in that event handlers are attached to the cluster shell, and not to the input element. You may need to tweak this aspect to achieve the desired effect.