【Jquery动画】

最新推荐文章于 2024-10-02 05:39:15 发布

柒一’

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量42

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_67969470/article/details/127798799

版权

注意：animate动画修改颜色需要单独引入颜色插件

<body>
    <div class="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>
</body>

<script>
    //animate({},时间)方法用于
    // 1、可以使用hide()和show()方法来隐藏和显示HTML元素
    $('#hide').click(function(){
        $('.box').hide(3000)
    })
    $('#show').click(function(){
        $('.box').show(3000)
    })
    $('#toggle').click(function(){
        $('.box').toggle(3000)
    })
    $('#fadeIn').click(function(){
        $('.box').fadeIn(3000)
    })
    $('#fadeOut').click(function(){
        $('.box').fadeOut(3000)
    })
    $('#fadeToggle').click(function(){
        $('.box').fadeToggle(3000)
    })
    $('#slideDown').click(function(){
        $('.box').slideDown(3000)
    })
    $('#slideUp').click(function(){
        $('.box').slideUp(3000)
    })
    $('#slideToggle').click(function(){
        $('.box').slideToggle(3000)
    })
    $('#animate').click(function(){
        $('.box').animate({
            left:'300px',
            width:'500px',
            height:'500px',
            top:'300px',
            fontSize:'300px',
            rotate:'360deg',
            lineHeight:'500px',
            backgroundColor:'yellow'
        },3000)
    })
</script>