jQuery动画

css部分

引入jQuery

<script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        #box {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #move {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

html部分

按钮以及盒子

<div id="box"></div>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <button id="fadeToggle">切换淡出入</button>
    <button id="slideDown">下滑</button>
    <button id="slideUp">上滑</button>
    <button id="slideToggle">切换滑动</button>
    <button id="animate">自定义动画</button>
    <button id="stop">暂停</button>
    <div id="moveBox"></div>

方法

方法	功能
hide()	隐藏
show()	显示
toggle()	切换 hide() 和 show() 方法
fadeIn()	用于淡入已隐藏的元素
fadeOut()	用于淡出可见元素
fadeToggle()	在 fadeIn() 与 fadeOut() 方法之间进行切换
slideDown()	用于向下滑动元素
slideUp()	用于向上滑动元素
slideToggle()	在 slideDown() 与 slideUp() 方法之间进行切换
animate()	用于创建自定义动画。 不可以改变颜色 需要插件
jQuery stop()	用于停止动画或效果
回调函数	在当前动画 100% 完成之后执行。

js部分

// hide() 和 show() 方法来隐藏和显示
    $("#hide").click(function () {
      $("#box").hide();
    });
    $("#show").click(function () {
      $("#box").show();
    });
    // 可以使用 toggle() 方法来切换
    $("#toggle").click(function () {
      $("#box").toggle();
    });
    // 2、fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
    $("#fadeIn").click(function () {
      $("#box").fadeIn(2000);
    });
    $("#fadeOut").click(function () {
      $("#box").fadeOut(2000);
    });
    //  fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    $("#fadeToggle").click(function () {
      $("#box").fadeToggle(2000);
    });
    // 3、 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
    $('#slideDown').click(function() {
        $('#box').slideDown(3000)
    })
    $('#slideUp').click(function () {
        $('#box').slideUp(3000)
    })
    // slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
     $('#slideToggle').click(function () {
        $('#box').slideToggle(3000)
    })
    // 4、animate() 方法用于创建自定义动画
    // 不能改变颜色
    // 回调函数 在当前动画 100% 完成之后执行。
    $('#animate').click(function() {
        $('#moveBox').animate({
            left:'300px',
            width : '200px'

        },3000,function() {
            alert('移动完成')
        })
    })
    // jQuery stop() 方法用于停止动画或效果
     $('#stop').click(function() {
        $('#moveBox').stop()
     })