Velocity 2.0.0+版本fadeIn失效及marginTop动画解决方案咨询

首先得明确一个核心差异：Velocity 2.x（V2）彻底移除了1.x版本里预设的fadeIn、fadeOut这类快捷动作，这就是你调用$ele.velocity("fadeIn")时Chrome报错的直接原因。下面分两部分解决你的核心问题：

一、V2中替代fadeIn/fadeOut的实现方式 #

在V2里，我们需要通过直接定义**透明度（opacity）和可见性（visibility）**的属性动画来模拟淡入淡出效果，还可以按需控制元素的布局占位：

模拟fadeIn效果 #

// 淡入：从透明不可见变为完全可见
$(elementID).velocity({
  opacity: [1, 0], // 数组第一个值是目标值，第二个是起始值
  visibility: "visible"
}, {
  duration: 1000,
  // 动画开始前先把元素置为透明不可见的初始状态
  begin: function() {
    $(this).css({ opacity: 0, visibility: "hidden" });
  }
});

模拟fadeOut效果 #

// 淡出：从完全可见变为透明不可见，可选移除布局占位
$(elementID).velocity({
  opacity: [0, 1],
  visibility: "hidden"
}, {
  duration: 1000,
  complete: function() {
    // 如果不需要元素占位置，动画结束后设置display:none
    $(this).css("display", "none");
  }
});

如果要像1.x那样链式调用，直接把两个动画连起来即可：

$(elementID)
  .velocity({ opacity: [1,0], visibility: "visible" }, { duration: 1500 })
  .velocity({ opacity: [0,1], visibility: "hidden" }, { delay: 500, duration: 1500 });

二、解决marginTop动画失效的问题 #

针对Velocity 1.5.0版本 #

1.5.0对属性值的格式要求很严格，必须带单位，而且属性名可以用驼峰式marginTop或加引号的短横线式"margin-top"：

// 1.5.0版本的正确写法
$("#test").velocity({
  marginTop: "50px" // 不能只写数字，必须带px等合法单位
}, { duration: 1000 });

针对Velocity 2.x版本 #

V2的属性写法更规范，同样需要带单位，确保你引入的是V2的正确版本（比如2.0.6）即可正常运行：

// V2版本的marginTop动画示例
$("#test").velocity({
  marginTop: "100px"
}, { duration: 1500 });

额外提醒 #

官方强调不要用jQuery的$.animate()和$.fade()，是因为它们的性能机制会拖慢页面整体表现，而Velocity本身就是为解决这个痛点设计的，所以坚持用Velocity的属性动画方案就好。

内容的提问来源于stack exchange，提问作者施云瀚