如何实现文字从左到右移动动画？jQuery animate代码无效怎么办

动画不生效核心是两个问题：

• left属于定位偏移属性，只有元素position值不是默认的static时才会生效，没有给#networkHeading设置非static定位的情况下，修改left值不会产生任何视觉变化
• 直接把动画目标值设为left:0，没有定义动画起始位置，哪怕定位生效也看不到移动过程

第一步：给目标元素加定位 #

给#networkHeading设置相对定位即可，不会破坏原有页面布局，是这类文字位移动画的最优选择：

#networkHeading {
  position: relative;
}

如果想要文字从容器外移入不出现横向滚动条，可以给文字的父容器加overflow: hidden。

第二步：编写触发时的动画逻辑 #

每次触发时先把文字放到左侧起始位置，再执行动画移动到目标位置，就能看到从左向右移动的效果：

// 把这段逻辑放到你需要的触发回调里即可，比如点击事件、定时触发、接口请求完成触发等场景
$("#networkHeading")
  .css({
    'color': '#03709b',
    'left': '-100px' // 起始位置：原位置左侧100px，可自行调整数值修改移动距离
  })
  .animate({
    'left': 0 // 终点位置：元素原本的正常位置
  }, "slow");

可选效果：每次触发从当前位置继续右移 #

如果需要的效果不是复位后再移入，而是每次触发文字都在当前位置基础上再往右移动一段，可以用累加写法：

$("#networkHeading")
  .css('color','#03709b')
  .animate({
    'left': '+=50px' // 每次触发向右移动50px，可自行调整步长
  }, "slow");

内容的提问来源于stack exchange，提问作者Batool