Jquery - EaseOutBounce effect

Question

I have a problem with my code. When i click on button, nothing happen, just reload the page.

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'
      });
   });
});

Please help to solve this, i dont have more idea.

Thanks.

Answer 1

First off, make sure you have referenced JQuery:

Example:

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

After the click event, you can return false.

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

or make the following change:

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

Reference: https://api.jquery.com/event.preventdefault/