单击时重新启动关键帧

Question

我有使用关键帧浮动的气泡,但它们是按钮,我也想在点击时消失,然后让它自动重启0%.我一直在呼吁onmousedown,并onmouseup要做到这一点,但它似乎并不奏效.有任何想法吗？

$(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

你的模式已被破坏、行不通。

首先，正确的包装应该是：

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

//or

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

但如果您这样做，则无法从作为 HTML“属性”附加的事件处理程序访问Bubbles()和。Bubbles2()

因此，在 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);
});

或者，直接将气泡发送到屏幕外，而不用调整不透明度：

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

注意：这两个示例都与原始示例不同，因为事件处理程序附加到集群包装器，而不是输入元素。您可能需要调整该方面才能达到所需的效果。