animate()
第一个参数: 是个对象 目的地
第二个参数: 需要的时间、
第三个参数: 速率
第四个参数: 成功后的函数
<div>
<img src="./1.jpg" alt="">
</div>
<button>运动开始</button>
<script src="../jquery-3.4.1.js"></script>
<script>
$('button').click(function() {
$('div').animate({
left: 500,
}, 1000, 'linear', function() {
console.log('运动完成')
});
})
</script>
自带的速率效果很少,我们可以使用第三方jq插件。在jq下方引入之后直接使用对应的速率名称即可
jQuery Easing
jQuery Easing 动画效果扩展
效果:https://www.runoob.com/jqueryui/api-easings.html
stop()
适合同一个东西需要往不同方向运动,连续点击带来拖影的时候使用
第一个参数: true 取消动画队列
第二个参数: true 立即执行完当前动画
正常:
默认的stop()
不取消动画队列,也不立即执行完成。
$('button').click(function() {
$('div')
.animate({
left: 500,
}, 1000)
.animate({
top: 500,
}, 1000);
})
$('.stop').click(function() {
$('div').stop(false, false)
})
带参数:
$('.stop').click(function() {
$('div').stop(true, false); // 取消动画队列,但不立即完成。
})
$('.stop').click(function() {
$('div').stop(true, true) // 取消动画队列,并立即完成
})
$('.stop').click(function() {
$('div').stop(false, true) // 不取消队列,但立即完成 针对第一个动画
})