Making a keyframes restart on click

I have bubbles that float up using keyframes, but they are buttons that I also want to disappear when clicked and then have it automatically restart at 0% . I have been calling onmousedown and onmouseup to do this but it doesn't seem to be working. 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>

---

There were a couple of problems in the snippet that was provided in question:

jQuery libraries were not included.

$(document).ready wrapper was written wrongly (it should be written as mentioned in Roamer-1888's answer and the event handlers should be directly attached via JS. This is actually the best practice instead of using inline attributes.

Other than those two the following are the things that you need to note regarding CSS animations:

Once an infinite animation starts, it continues to be running until the time the animation is removed from the element. So, even though it was hidden using opacity: 0 , the animation was running in the background.

To restart a CSS animation, the only possible way is to remove the animation on the element and add it back again after a delay.

The above cannot be done with mousedown and mouseup events because when the animation is removed (on mousedown ) the element goes back to its original position and the chances are very high that your mouse pointer is no longer over the element. This means the mouseup event would not get fired because it fires only when the mouse is still over the element.

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

So the solution is to do the following:

Use a specific class for the animation properties alone, add this extra class to the element. This is not mandatory but makes it easier to add or remove the animation by just add/remove class methods.

Use the click event on the element, first remove the animation class, set opacity to 0 to hide the element and after a small delay (using setTimeout ) add the animation class back to the element and set the opacity back 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>

---

You have a broken, unworkable pattern.

First, the correct wrapper should be :

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

//or

$(function() {
    ...
});

But if you do that, then Bubbles() and Bubbles2() are unreachable from the event handlers attached as HTML "attributes".

Therefore, attach the 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 to its off-screen directly, without fiddling with the opacity :

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

Note: Both examples differ from you original in that the event handlers are attached to the cluster wrapper, not the input element. You may need to adjust that aspect to achieve the desired effect.

链接地址: http://www.djcxy.com/p/31256.html

上一篇: 如何在lambda实体框架中对动态进行排序？

下一篇: 点击重新启动关键帧