jQuery的标准动画 jQuery的折叠动画 jQuery的渐隐渐现动画 jQuery的自定义动画 jQuery的停止动画

最新推荐文章于 2022-08-08 21:14:18 发布

Allen·赵

最新推荐文章于 2022-08-08 21:14:18 发布

阅读量99

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108936544

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中标准动画、折叠动画、渐隐渐现动画和自定义动画的使用方法，包括.show(), .hide(), .slideDown(), .slideUp(), .fadeIn(), .fadeOut(), 和 .animate()等函数，以及如何通过

摘要由CSDN通过智能技术生成

jQuery的标准动画

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        margin: 0 auto;
        /* position: fixed; */
        /* right: 0; */
        display: none;
    }

</style>
</head>
<body>
<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的标准动画
    // 通过类似于动画的形式,来完成标签的显示隐藏
    // 实际上,本质,就是我们之前写的 运动函数
    //    通过 定位的 left  top 属性 和 透明度 opacity 来完成效果

    // 1, $(标签).show()  显示
    //    语法 : $(标签).show(时间,运动曲线,运动结束时执行的函数)
    //    运动到指定的位置,也就是css样式,定义的标签位置
    //    离那里进,就从那里开始运动
    //    离 左上角近 就从左上角开始运动

    // 2, $(标签).hide()  隐藏
    //    语法 : $(标签).hide(时间,运动曲线,运动结束时执行的函数)
    //    从原始的位置,开始隐藏
    //    离那里进,就隐藏到那里

    // 3, $(标签).toggle()  切换
    //    语法 : $(标签).toggle(时间,运动曲线,运动结束时执行的函数)
    //    隐藏就改为显示,显示就改为隐藏
    //   

    // 给显示按钮,添加事件
    $('[name="show"]').click(function(){
        $('div').show( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })


    // 给隐藏按钮,添加事件
    $('[name="hide"]').click(function(){
        $('div').hide( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').toggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })

</script>
</body>

jQuery的折叠动画

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        margin: 0 auto;
        display: none;
    }

</style>
</head>
<body>
    <button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的折叠动画

    // 通过改变高度,来实现效果

    // 1, $(标签).slideDown()  显示
    //    语法 : $(标签).slideDown(时间,运动曲线,运动结束时执行的函数)
    //    从 css 设定的位置上 , 下拉显示标签
    //    

    // 2, $(标签).slideUp()  隐藏
    //    语法 : $(标签).slideUp(时间,运动曲线,运动结束时执行的函数)
    //    从 css 设定的位置上 , 上卷隐藏标签
    //    

    // 3, $(标签).slideToggle()  切换
    //    语法 : $(标签).slideToggle(时间,运动曲线,运动结束时执行的函数)
    //    隐藏就改为显示,显示就改为隐藏
    //   

    // 给显示按钮,添加事件
    $('[name="down"]').click(function(){
        $('div').slideDown( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })


    // 给隐藏按钮,添加事件
    $('[name="up"]').click(function(){
        $('div').slideUp( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').slideToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })

</script>
</body>

jQuery的渐隐渐现动画

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        margin: 0 auto;
        display: none;
    }

</style>
</head>
<body>
<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的渐隐渐现动画

    // 通过改变透明度,来实现效果

    // 1, $(标签).fadeIn()  显示
    //    语法 : $(标签).fadeIn(时间,运动曲线,运动结束时执行的函数)
    //    从 css 设定的位置上 , 下拉显示标签
    //    

    // 2, $(标签).fadeOut()  隐藏
    //    语法 : $(标签).fadeOut(时间,运动曲线,运动结束时执行的函数)
    //    从 css 设定的位置上 , 上卷隐藏标签
    //    

    // 3, $(标签).fadeToggle()  切换
    //    语法 : $(标签).fadeToggle(时间,运动曲线,运动结束时执行的函数)
    //    隐藏就改为显示,显示就改为隐藏
    //   

    // 给显示按钮,添加事件
    $('[name="in"]').click(function(){
        $('div').fadeIn( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })


    // 给隐藏按钮,添加事件
    $('[name="out"]').click(function(){
        $('div').fadeOut( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').fadeToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })

</script>
</body>

jQuery的自定义动画

<style>
    div{
        width: 300px;
        height: 300px;
        background: pink;
        margin: 0 auto;
        color: red;
        font-size: 100px;
        /* display: none; */
    }

</style>
</head>
<body>
<button name="width">改变宽度</button>
<button name="wh">改变宽度高度</button>
<button name="color">改变颜色</button>
<div>中国</div>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的自定义动画
    // $(标签).animate()
    // 可以通过 自定义动画 实现, css样式的改变
    // 特别注意: 有一些css样式,是不能改变的
    //   例如颜色
    // 语法形式:
    //   $(标签).animate( {属性:属性值,属性:属性值....} )
    //   参数1: 要改变的 css的属性和属性值   可以没有单位px
    //   参数2: 定义的执行时间
    //   参数3: 定义的运动曲线
    //   参数4: 运动结束,执行的函数


    $('[name="width"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW);
        $('div').animate({
            width : `${randomW}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })

    $('[name="wh"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        let randomH = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW,randomH);
        $('div').animate({
        
            width : `${randomW}px`,   
            height: `${randomH}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })

    $('[name="color"]').click(function(){
        let randomColor = `rgb(${parseInt(Math.random()*256)} ,${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)})`;
        console.log(randomColor);
        $('div').animate({
            background : randomColor,
            color : randomColor,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })




</script>
</body>

jQuery的停止动画

一

<style>
    div{
        width: 100px;
        height: 500px;
        background: pink;
        margin: 0 auto;
    }

</style>
</head>
<body>
<button name="toggle">上下切换显示</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // jQuery的停止动画

    // .stop()
    //    触发程序的执行,会马上停止,当前动画的执行
    //    就从标签运动到的当前位置开始,马上执行下一次动画
    // .finish()
    //    触发程序的执行,会马上停止,当前动画的执行
    //    标签会立即执行动画结束时的效果
    //    从动画结束的位置,开始执行,下一次动画


    // 点击触发,新的运动,会马上停止当前运动,并且在当前停止的位置,开始执行新的运动
    // $('[name="toggle"]').click(function(){
    //     $('div').stop().slideToggle(5000 , 'linear');
    // })

    // 点击触发,新的运动,会马上停止当前运动,并且在当前运动的终止位置,开始执行新的运动
    $('[name="toggle"]').click(function(){
        $('div').finish().slideToggle(5000 , 'linear');
    })

    // 总结:
    //   stop 和 finish  
    //   是当前这个运动触发的时候,之前的运动的停止方式
    //   也就是 这次运动触发,要执行之前,上一次运动怎么办

</script>
</body>

二

<style>
    div{
        width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        top:50px;
        left: 0;
    }

</style>
</head>
<body>
<button name="go">go</button>
<button name="back">back</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    
    // 点击触发,新的运动,会马上停止当前运动,并且在当前运动的终止位置,开始执行新的运动
    $('[name="go"]').click(function(){
        // go上添加,终止的是 back的运动

        $('div').stop().animate( {left:'500px' , top:'500px'} , 2000)
    })

    $('[name="back"]').click(function(){
        // 给back添加 .stop()
        // 作用是 在 执行当前 back的运动之前,如果还有其他正在执行的运动
        // 要立即停止,从当前停止的位置,直接执行back的运动
        // $('div').stop().animate( {left:'0px' , top:'50px'} , 2000);

        // back添加的,实际上是终止的的go的运动
        $('div').finish().animate( {left:'0px' , top:'50px'} , 2000);
        
    })

    // 总结:
    // stop()  和  finish()
    // 都不是操作当前这个运动的
    // 是定义执行当前运动之前,如果还有其他正在执行的运动,应该怎么办
    // stop()    就从当前标签运动的位置,开始,立即执行下一次运动
    // finish()  从之前运动的终点目标位置,开始,立即执行下一次运动


</script>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的标准动画 jQuery的折叠动画 jQuery的渐隐渐现动画 jQuery的自定义动画 jQuery的停止动画

jQuery的标准动画<style> div{ width: 300px; height: 300px; background: pink; margin: 0 auto; /* position: fixed; */ /* right: 0; */ display: none; }</style></head><body>
复制链接

扫一扫

专栏目录