applying bounce animation to div elements manually using js

Question

Here, I am trying to apply bounce animation to my dynamically generated messages called by API but no effect is coming. Also, I tried using effect() but it was also of no use. Here is the link to my Codepen. Link

$(document).ready(function () {

    $("#getMessage").on("click",function () {
        //(".message").effect("bounce", {times:300}, 300);  
        move();
    });    

    var divObj = null;

    function init () {
        divObj = document.getElementById("message");
        //   $("#message").toggle("bounce", {times: 6}, "slow"); 
        divObj.style.position = "relative";
        divObj.style.top = "0px";
    }

    function move () {
        divObj.style.top = parseInt(divObj.style.top) + 10 + "px";
    }

});

Answer 1

What you've supplied above isn't too far off from the result(s) you're looking for. Essentially the {times:300} you are supplying is far too many for the speed/ratio - resulting in no visible animation.

From what I have just tested, any bounces >10 with the speed @300 seem to display in an abnormal manner.

Please see this codepen: http://codepen.io/anon/pen/BWyqpY

Give this a try:

$("#getMessage").on("click",function () {
    $(".message").effect("bounce",{times:3},300);

    // I'm not sure if you still want this method.
    move();
});