动画 css 变化 (jQuery)

Question

我正在尝试将 jQuery 缓动插件应用于 .css 和 .animate，但没有用，我不知道为什么，因为通常它可以用。代码示例：

$('#img').hover(function() {
    $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce");
}, function() {
    $(this).animate({"border-radius":"75px"}, 0, "easeOutBounce");
});

所以基本上是 .animate（而不是 .css 以避免出现问题）但我还想设置动画持续时间和工作 "easeOutBounce" 或其他一些效果。

现在边框半径在 :hover 上动画，但没有动画时间。

我无法在 css 中执行此操作，并且 jQuery 无法正常工作，有什么方法可以解决这个问题吗？

谢谢，奥利弗

Answer 1

我认为您在动画中使用的语法不正确。另外，如果你想看东西，你需要设置持续时间 > 0。

请随意使用您自己的插件更改 easing 部分。

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);

#img {
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<img id="img" src="https://i.stack.imgur.com/Qk0jX.jpg">

Answer 2

这个函数应该可以工作：

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);

Answer 3

尝试修改计时效果，例如 ease out bounce

改为ease in

动画 css 变化 (jQuery)

Animated css change (jQuery)

jquery

css

animation

easing

easing-functions