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>
Xeon
  • 385
  • 3
  • 11
  • **[This post](http://stackoverflow.com/questions/14707605/jquery-ui-easeoutbounce-needs-to-be-more-bouncy)** might throw some light on that.. – Guruprasad J Rao Oct 08 '15 at 04:17

1 Answers1

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

guest271314
  • 1
  • 15
  • 104
  • 177
  • 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 08 '15 at 05:56
  • Ok, I fumbled around with some code: http://codepen.io/Chiz/pen/dYRGbo The animation looks a bit weird though. – Xeon Oct 08 '15 at 07:55
  • @Xeon Try changing `easing` to `"linear"` http://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 – guest271314 Oct 08 '15 at 13:06