javascript-使用js手动将跳动动画应用于div元素

在这里,我试图将反弹动画应用于由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";
    }

});

解决方法:

您上面提供的内容与您要寻找的结果相差不远.本质上,您提供的{times：300}对于速度/比率来说太多了-导致看不到动画.

根据我刚刚测试的结果,速度为@ 300的任何大于10的反弹似乎都以异常的方式显示.

请查看此代码笔：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();
});