如何在显示块上使用 ease Out Bounce 动画？

Question

所以我想在我的手机菜单上使用jQuery ui效果easeOutBounce，脚本如下：

$("#navbar-checkbox, .mobile-menu-wrapper .13").click(function(){
  $("#mobile-nav").({ display: 'block' }, 600, 'easeOutBounce');
})

但这不起作用，它甚至没有将 css 更改为 display: block。

1. 如何使用 display block 动画？
2. 你能告诉我如何对它应用 easeOutBounce吗

谢谢。

Answer 1

因此，您需要使用 jQuerys .css() 样式操作来设置要设置动画的元素的样式。这是首先完成的。

之后，为了让动画也按您的意愿工作，您希望在元素上设置 css 属性后触发 .slideDown()，使用 duration 和指定效果 (easeOutBounce)

代码片段：

$("#mobile-nav").css('display','block').slideDown(600, 'easeOutBounce');