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>

После события click вы можете вернуть 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/