JQuery BorderRadius在mouseout

Question

我试图为动画元素设置边框半径，如下所示：

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

当我将鼠标悬停在元素上时，动画将正常工作。但是在徘徊之后，它不会用任何动画表演。

Answer 1

在Firefox中，动画不适用于mouseout。在这里使用CSS而不是javascript。

Ex：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;
}

Answer 2

另一种解决方案是使用jQuery-UI：

$(function() {
  $('#target').hover(function(){
      $(this).addClass('borderIn', 500);
  }, function(){
      $(this).removeClass('borderIn', 500);
  });
});

#target {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.borderIn {
  border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="target"></div>

Answer 3

我夸大了你的代码效果，但它似乎对我有用。

＆＃13;

＆＃13;

$("div").hover(function(){
    $(this).animate({borderRadius : 30});
}, function(){
    $(this).animate({borderRadius : 0});
});

＆＃13;

div{
  height: 70px;
  border: 3px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

＆＃13;

＆＃13;