jQuery-EaseOutBounce效果

Question

我的代码有问题。当我单击按钮时，什么也没有发生，只需重新加载页面即可。

CSS：

#click{
    position: absolute;
    right: 50px;
    top: 30px;
}
.media{
    width: 100px;
    height: 300px;
    background: #ccc;
    position: absolute;
    right: 20px;
    top: 80px;
    display: none;
}

HTML：

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

<button id="click">Button</button>
<div class="media"></div>

JS：

$(document).ready(function(){
   $("#click").click(function () {
      $('.media').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
});

请帮助解决此问题，我没有更多的想法。

谢谢。

Answer 1

首先，请确保您已引用JQuery：

示例：

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256 FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

在单击事件之后，您可以返回false。

   $("#click").click(function () {
      $('.media').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
   return false;

或进行以下更改：

   $("#click").click(function (event) {
      event.preventDefault();
      $('.media').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });

参考：https://api.jquery.com/event.preventdefault/