jQuery动画

//css代码:
       #box {
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
        }

        #move {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: gold;
        }

//html代码：
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="toggle">toggle</button>
    <button id="fadeIn">fadeIn</button>
    <button id="fadeOut">fadOut</button>
    <button id="fadeToggle">fadeToggle</button>
    <button id="slideDown">slideDown</button>
    <button id="slideUp">slideUp</button>
    <button id="slideToggle">slideToggle</button>
    <button id="animate">animate</button>
    <button id="STOP">STOP</button>
    <div id="box"></div>
    <div id="move">会移动的盒子</div>

用hide()和show()方法来隐藏和显示HTML元素

kkkk

//js代码:
   $('#hide').click(function () {
        $('#box').hide()
    })
    $('#show').click(function () {
        $('#box').show()
    })

toggle()用来切换hide()和show()

//js代码:
   $('#toggle').click(function () {
        $('#box').toggle()
    })

fadein fadeout

用fadeIn()用于淡出已隐藏的元素,fadeOut()用于淡出可见元素

//js代码:
    $('#fadeIn').click(function () {
        $('#box').fadeIn(500)
    })
    $('#fadeOut').click(function () {
        console.log('77');
        $('#box').fadeOut(500)
    })

fadeToggle()可以在fadeIn()he fadeOut()之间进行切换

//js代码:
    $('#fadeToggle').click(function () {
        $('#box').fadeToggle(1000)
    })

向上滑，向下滑

slideDown()用于向下滑动元素,slideUp()用于向上滑动元素

//js代码：
    $('#slideDown').click(function () {
        $('#box').slideDown(5000)
    })
    $('#slideUp').click(function () {
        $('#box').slideUp(5000)
    })

slideToggle()可以在slideDown()和slideUp()之间进行切换

//js代码：
    $('#slideToggle').click(function () {
        $('#box').slideToggle(5000)
    })

动画

animate()用于创建自定义动画

//js代码：
     $('#animate').click(function () {
        $('#move').animate({
            left: '100px',
            width: '300px',
            fonsSize: '30px',
            'background-color': 'blue'
        }, 3000, function () {
            console.log('1234321')
        })
    })

jQuery stop()用于停止动画或效果

//js代码：
     $('#STOP').click(function () {
        $('#move').stop()
    })