jq: 动画-自定义

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)  // 不取消队列，但立即完成 针对第一个动画
})