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