使用js手动为div元素应用反弹动画

Question

在这里，我试图将弹跳动画应用到由API调用的动态生成的消息，但不会产生任何效果。另外，我尝试使用effect()，但它也没用。这里是我的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

什么您在上面提供的是不是太远了，从你正在寻找的结果（S）。实质上，您提供的{times:300}对于速度/比率而言太多 - 导致没有可见动画。

从我刚测试，任何反弹> 10与速度@ 300似乎异常的方式来显示。

请参阅本codepen：http://codepen.io/anon/pen/BWyqpY

试试这个：

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

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