Question

因此，当我将鼠标悬停在按钮上时，我使用Justin Aguilar的CSS3动画备忘单中的代码来激活按钮上的动画：

prediction = tf.nn.softmax(logits_out)
feed_dict = {x_data: your_input_data, dropout_keep_prob: 1.0}
pred = sess.run(prediction, feed_dict)
best_guess = np.argmax(pred)  # highest-rated class

问题是，即使我不再悬停在按钮上，动画也会继续。每当用户将鼠标悬停在按钮上时，我可以做什么来制作按钮动画，但是当他们将鼠标移开时停止？每当我试图用任何涉及.stop的东西进行调整时，它都会让动画无法播放。

我是编码的新手，今天这是一个巨大的痛苦，所以任何帮助都将非常感谢！谢谢！

Answer 1

根本不需要JavaScript。使用CSS选择器。 #animatedElement：悬停在你的情况下。

Answer 2

在这里，您可以再使用一个解决方案

inputs

inputs

inputs

希望这会对你有所帮助。

Answer 3

hover()方法接受两个回调：一个用于鼠标进入html元素，一个用于何时离开。因此，您可以简单地向函数添加另一个回调以删除“pulse”类。

$('#animatedElement').hover(function() {
  $(this).addClass("pulse");
},
function(){
  $(this).removeClass("pulse");
});

或者，您可以选择亚历克斯的优秀答案。

Answer 4

您可以使用CSS制作动画，例如，在此代码中：

.pulse {
    background: GREEN;
    border-radius: 6px
    transition-property: background, border-radius;
    transition-duration: 1s;
    transition-timing-function: linear;
}
.pulse:hover {
    background: BLACK;
    border-radius: 50%;
}

你已经在css中设置了元素的开始属性和转换声明，在这个例子中，我将在悬停在具有脉冲类的元素上时在背景和半径属性中进行转换。

如何调整此javascript代码，以便只要鼠标悬停在元素上，就会激活动画？

4 个答案: