使用JavaScript手动将弹跳动画应用于div元素

Question

使用JavaScript手动将弹跳动画应用于div元素

3

我尝试将反弹动画应用于通过API动态生成的消息，但没有效果。同样，我尝试使用effect()，但也无济于事。这是我的Codepen链接。链接

$(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";
    }

});

- aayushi

感谢 @elchininet 提出的编辑建议。 - aayushi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Cruz · Accepted Answer

您提供的内容与您要查找的结果并不相差太远。实际上，您提供的{times:300}次数对于速度/比率来说过多了，结果就是没有可见的动画效果。

我刚刚测试了一下，任何在速度为300时反弹次数>10似乎都会以异常方式显示。

请参考此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();
});