1

My code: http://codepen.io/Chiz/pen/jbwPLO (click anywhere in the blank area)

How do I change the number of times the div is bouncing? Say, I want the div to bounce 10 times before it stops, as well as change the speed of the bounce. The JQuery UI surprisingly has not much info (to be blunt: nothing, no sample code, no tutorials) on using easings and special easings in the animate() or slidedown() functions, especially their syntax.

$("div").hide();

$(window).on("click", function() {
  $("div").slideToggle(700, "easeOutBounce");
})
div {

  width: 300px;

  height: 300px;

  position: absolute;

  bottom: 0;

  background-color: gray;

  display: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<div></div>

1

1 Answer 1

0

Try using .effect()

$("div").hide();

$(window).on("click", function() {
  var el = $("div")
  el.effect({
    effect: "bounce",
    easing: "easeOutBounce",
    duration: 3000,
    distance: 100,
    direction: "up",
    times: 10
  })
});

codepen http://codepen.io/anon/pen/jbwPzP

3
  • Tks, is there a way to toggle this thing? ie: when clicking in the blank area, the item gets shown and animation happens, then when click again, it gets hidden again etc.
    – Xeon
    Oct 8, 2015 at 5:56
  • Ok, I fumbled around with some code: codepen.io/Chiz/pen/dYRGbo The animation looks a bit weird though.
    – Xeon
    Oct 8, 2015 at 7:55
  • @Xeon Try changing easing to "linear" codepen.io/anon/pen/Kdqgyr . Note, see original Question "How do I change the number of times the div is bouncing? Say, I want the div to bounce 10 times before it stops," setting times options adjusts bounces - though rendering of bounces effect are also affected by duration ; longer duration the clearer "bounces" appear Oct 8, 2015 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.