javascript - 具有弹跳效果的 slideToggle 不起作用

Question

当我的 div 上下滑动时，我尝试创建有效弹跳的所有方法都不起作用。任何帮助将不胜感激!

这是我的代码

$(document).ready(function() {
  $('#button').click(function() {
    $("#div").slideToggle();
    $("#div").effect('bounce', 300);
  });
});

div#div {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  position: relative;
  display: none;
  top: 30px;
  left: 0;
}

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

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

感谢您的帮助!

https://jsfiddle.net/zs1u8b5c/

Answer 1

您编写的内容符合预期。但是，由于这不是 jQuery 主要 API 的一部分，您还需要包含 UI 脚本。

更新的 jsFiddle:https://jsfiddle.net/1gu4u8dp/

这将是:

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

(最好制作本地副本)