jQuery动画

最新推荐文章于 2022-08-15 09:07:08 发布

qiudonga

最新推荐文章于 2022-08-15 09:07:08 发布

阅读量204

点赞数 1

分类专栏： web 文章标签： jQuery动画

本文链接：https://blog.csdn.net/qq_42488087/article/details/102485840

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

jQuery动画：

方法：

show hide toggle：显示隐藏切换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*让元素不显示*/
                display: none;
            }
            #d2{
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            function fun1() {
                /*三个参数，完成时间  动画效果  动画完成后执行的方法，不用的参数可以不写*/
                $("#d1").show(2000)
                $("#d2").hide(3000);
            }
            function fun2() {
                $("#d1").hide(2000)
                $("#d2").show(3000);
            }
            function fun3() {
                /*切换*/
                $("#d1").toggle(3000)
                $("#d2").toggle(3000);
            }
        </script>
    </head>
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <input type="button" value="show" onclick="fun1()" />
        <input type="button" value="hide" onclick="fun2()" />
        <input type="button" value="toggle" onclick="fun3()" />
    </body>
</html>

slideDown slideUp slideToggle 上下显示上下隐藏上下切换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*让元素不显示*/
                display: none;
            }
            #d2{
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            function fun1() {
                /*三个参数，完成时间  动画效果  动画完成后执行的方法，不用的参数可以不写*/
                $("#d1").slideDown(2000)
                $("#d2").slideUp(3000);
            }
            function fun2() {
                $("#d1").slideUp(2000)
                $("#d2").slideDown(3000);
            }
            function fun3() {
                /*切换*/
                $("#d1").slideToggle(3000)
                $("#d2").slideToggle(3000);
            }
        </script>
    </head>
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <input type="button" value="show" onclick="fun1()" />
        <input type="button" value="hide" onclick="fun2()" />
        <input type="button" value="toggle" onclick="fun3()" />
    </body>
</html>

fadeIn fadeOut fadeToggle fadeTo 渐变显示渐变隐藏渐变切换渐变到一定程度

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*让元素不显示*/
                display: none;
            }
            #d2{
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            function fun1() {
                /*三个参数，完成时间  动画效果  动画完成后执行的方法，不用的参数可以不写*/
                $("#d1").fadeIn(2000)
                $("#d2").fadeOut(3000);
            }
            function fun2() {
                $("#d1").fadeOut(2000)
                $("#d2").fadeIn(3000);
            }
            function fun3() {
                /*切换*/
                $("#d1").fadeToggle(3000)
                $("#d2").fadeToggle(3000);
            }
        </script>
    </head>
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <input type="button" value="show" onclick="fun1()" />
        <input type="button" value="hide" onclick="fun2()" />
        <input type="button" value="toggle" onclick="fun3()" />

    </body>
</html>

animate :自定义动画，参数：动画变化的方法，变化的时间，动画结束后执行的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            margin: 0px auto;
        }
        #d1 img{
            width: 100px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        $(function () {
            setInterval(function () {
                $('#d1').animate({
                    width:'50px',
                    height:'50px',
                    opacity:0.2
                },500)
                $('#d1 img').animate({
                    width:'50px',
                    height:'50px',
                    opacity:0.2
                },500)

                $('#d1').animate({
                    width:'100px',
                    height:'100px',
                    opacity:1
                },500)
                $('#d1 img').animate({
                    width:'100px',
                    height:'100px',
                    opacity:1
                },500)
            },1000)
        })
    </script>
</head>
<body>
    <div id='d1'>
        <img src="../img/b.jpg" />
    </div>

</body>
</html>

迭代遍历的方法：

<script>
    $(function(){
        var $lis =$('li')
        /*遍历所有元素的方法*/
        /*
				 each每拿出一个元素 都会执行一次内部的function 
				 i 当前元素的索引
				 e 当前元素 DOM对象
				 * 
				 * */
        $lis.each(function (i,e){
            console.info(i+'>>>'+$(e).text())
        })


        $.each($lis,function (i,e){
            console.info(i+'>>>'+$(e).text())
        })
    })
</script>

qiudonga

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery动画

jQuery动画：方法：show hide toggle：显示隐藏切换<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty...
复制链接

扫一扫