Question

我有使用关键帧浮动的气泡，但它们是我想在点击时消失的按钮，然后让它自动重启0％。我一直在呼叫onmousedown和onmouseup这样做，但它似乎并没有起作用。有什么想法吗？

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

有问题的代码段中存在一些问题：

未包含jQuery库。
$(document).ready包装器（应该按照Roamer-1888的回答编写，事件处理程序应该通过JS直接连接。这实际上是最好的做法，而不是使用内联属性

除了这两点之外，还需要注意以下有关CSS动画的内容：

一旦无限动画开始，它将继续运行，直到动画从元素中移除为止。因此，即使它是使用opacity: 0隐藏的，动画也在后台运行。
要重新启动CSS动画，唯一可行的方法是删除元素上的动画，并在延迟后再将其添加回来。
使用mousedown和mouseup事件无法完成上述操作，因为当移除动画时（在mousedown上），元素会回到原来的位置并且机会很大非常高，你的鼠标指针不再在元素上。这意味着mouseup事件不会被触发，因为只有当鼠标仍在元素上时它才会触发。

从jQuery website：当鼠标指针悬停在元素上时，mouseup事件被发送到元素，鼠标按钮被释放。

所以解决方案是执行以下操作：

仅为animation属性使用特定类，将此额外类添加到元素中。这不是强制性的，但可以通过添加/删除类方法来更轻松地添加或删除动画。

在元素上使用click事件，首先删除动画类，将opacity设置为0以隐藏元素，并在稍微延迟后使用setTimeout）将动画类添加回元素并将opacity设置回1。

＆＃13;
＆＃13;
$(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); }); });
＆＃13;
.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; } }
＆＃13;
 <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>
＆＃13;
＆＃13;
＆＃13;

在top: 400px上添加mouseup不起作用，因为当CSS动画正在运行时，动画可以完全控制它正在使用的属性。只有可以覆盖动画的规则才是具有!important的规则。在可以避免的情况下使用!important通常是不好的做法，因此我不推荐重新启动动画的方式。

来自Animations Spec：CSS动画会影响计算属性值。在执行动画期间，属性的计算值由动画控制。这将覆盖正常样式系统中指定的值。动画会覆盖所有正常规则，但会被！important rules覆盖。

Answer 2

你有一种破碎，不可行的模式。

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

wxApp

但是如果你这样做，则$(document).ready(function() { ... }); //or $(function() { ... });和Bubbles()无法从作为HTML＆＃34;属性＆＃34;附加的事件处理程序中找不到。

因此，请在javascript中附加处理程序：

Bubbles2()

或者，直接将气泡发送到屏幕外，而不会摆弄不透明度：

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

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

单击时重新启动关键帧

2 个答案: