Question

我一直在测试动画鼠标的理论设计，以表明网站的用户可以向下滚动。它并不复杂，而且我想出了一个应该可以重复使用的设计......

但是出于某种原因，如果我尝试克隆元素并附加它，它不再可视化动画？但是如果我使用jQuery $.click()，它会在一次迭代后修复。

也许这只是一个浏览器呈现问题？如果你不能复制这个问题，请告诉我！干杯

jsfiddle：https://jsfiddle.net/xw39e0bs/4/

Answer 1

结果表明，velocity会根据当前的CSS值计算起点。因此，如果克隆移动元素中间运动，那将成为新的起点。因此，解决此问题的一种方法是提供forcefeeding。

工作示例：

function mouse(){
    $(".mouse .ball").velocity({
    top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
    duration: 800,
  easing: "swing",
}).velocity("reverse",{
    delay: 2000,
  complete: function(){
    mouse();
  }
});
}

mouse();

$("#clone").click(function(){
    $(".mouse").last().clone().appendTo("#mice");
});

https://jsfiddle.net/xw39e0bs/5/

Answer 2

In this version我们重新分配选择器以引入克隆的项目。然后，所有克隆都按预期进行动画处理。

complete: function(){
  sel = $(".mouse .ball");
  mouse();
}

Velocity.js - Buggy循环动画？

2 个答案: