javascript - JQuery BorderRadius 在 mouseout 中不执行动画

Question

我正在尝试为带有动画的元素设置边框半径，如下所示:

$(element).hover(function(){
    $(this).animate({borderRadius : 5});
}, function(){
    $(this).animate({borderRadius : 0});
});

当我将鼠标悬停在元素上时，动画将正常运行。但是悬停出来后，它不会执行任何动画。

Answer 1

在 Firefox 中，动画在 mouseout 上不起作用。此处使用 CSS 而不是 javascript。

例如:https://codepen.io/patdiola/pen/ZyaYdE

button {
  background: blue;
  border: 0;
  color: white;
  padding: 10px 20px;
  transition: border-radius ease-in-out 500ms;
}

button:hover {
  border-radius: 10px;
}