<button>点击动画开始</button> <div></div>
注意一定要给div加定位,不然就没法移动了
div { position: relative; top: 0; left: 0; width: 100px; height: 100px; background-color: pink; }
给元素添加匀速运动的动画,并封装函数
function animate(obj, target) { // 需要先清除定时器,防止连续点击速度变快 clearInterval(obj.timer) obj.timer = setInterval(function() { if (obj.offsetLeft >= target) { // 当到达目标距离时,就要清除定时器 clearInterval(obj.timer) } else { // 注意需要添加else语句,直接写会导致点击时即使到达目标位置还会动 obj.style.left = obj.offsetLeft + 1 + 'px'; } }, 30) } var div = document.querySelector('div'); var btn = document.querySelector('button') // 给btn添加事件,注意function(){},再花括号里面添加调函数,而不是直接写函数 btn.addEventListener('click', function() { animate(div, 500) })