CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kenny
kenny

Reputation: 444

slideToggle with bounce effect not working

Every method that I have tried to create a bounce effective when my div slides up and down does not work. Any help would be greatly appreciated!

Here's my code

$(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>

Thanks for any help!

https://jsfiddle.net/zs1u8b5c/

Upvotes: 0

Views: 94

Answers (1)

Travis J
Travis J

Reputation: 82287

What you wrote works as intended. However, as that is not part of jQuery's main API you need to include the UI script as well.

Updated jsFiddle: https://jsfiddle.net/1gu4u8dp/

Which would be:

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

(preferably make a local copy)

Upvotes: 7

Related Questions