jquery - 动画 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

Answer 4

我已经尝试过一个可以按原样工作的样本。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="block"></div>
<div class="block"></div>

$('div.block').hover(function(){
            $(this).animate({ borderRadius: '70px' }, 600, 'easeInBounce');
        },function(){
            $(this).animate({ borderRadius: '0px' }, 600, 'easeOutBounce');
        });