点击重新启动关键帧
我有使用关键帧浮起来的气泡，但是它们是我也想单击时消失的按钮， 然后让它自动重新启动为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>问题中提供的代码段中存在一些问题：
$(document).ready wrapper写错了（它应该写成如Roamer-1888的答案中提到的，事件处理程序应该直接通过JS连接，这实际上是最佳实践，而不是使用内联属性。 除了那两个，以下是关于CSS动画需要注意的事项：
opacity: 0隐藏，动画仍在后台运行。 上述操作不能用mousedown和mouseup事件完成，因为当动画被移除时（在mousedown ），元素会回到原来的位置，并且鼠标指针不再位于元素上的可能性非常高。 这意味着mouseup事件不会被触发，因为只有当鼠标仍在该元素上时它才会触发。
从jQuery网站： 当鼠标指针位于元素上方并释放鼠标按钮时， mouseup事件发送到元素。
所以解决方案是做到以下几点：
animation属性使用特定的类，将这个额外的类添加到元素。 这不是强制性的，只需添加/删除类方法即可轻松添加或删除动画。 click事件，首先删除动画类，将opacity设置为0以隐藏元素，并在一小段延迟后（使用setTimeout ）将动画类添加回元素，并将opacity设置为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>你有一个破碎的，不可行的模式。
首先，正确的包装应该是：
$(document).ready(function() {
...
});
//or
$(function() {
...
});
但是如果你这样做了，那么Bubbles()和Bubbles2()就无法从作为HTML“属性”附加的事件处理程序中获取。
因此，在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" });
});
});
注意：这两个示例都与您原来的不同之处在于，事件处理程序连接到集群包装器，而不是输入元素。 您可能需要调整该方面以达到所需的效果。
链接地址: http://www.djcxy.com/p/31255.html