博客列表 >制作各种动画的方法操作（时间：1月25日 7:54）

制作各种动画的方法操作（时间：1月25日 7:54）

过儿的博客原创转载: 2019年01月25日 10:28:52529浏览

1、hide() 隐藏效果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .box{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           }
       .c1{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .c2{
           background-color: red;
           width: 200px;
           height: 200px;
           text-align: center;
           line-height: 200px;
       }
      </style>
</head>
<body>
    <div class="box">
        <button class="c1">点我隐藏</button>
        <div class="c2">~我是hide~</div>
    </div>
<script type="text/javascript">
    $(function(){
        $('.c1').click(function(){
            $('.c2').hide(1000)
        })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

2、show() 显示方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">点我显示</button>
        <p class="box">~我是show~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.box').hide()
        $('.but').click(function(){
             $('.box').show(1000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

3、toggle() 事件切换方法，当隐藏时点击显示，当显示时点击隐藏

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">点我切换</button>
        <p class="box">~我是toggle~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').toggle(1000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

4、fadeIn() 方法淡入淡出效果，通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">淡入效果</button>
        <p class="box">~我是fadeIn~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.box').hide()
        $('.but').click(function(){
             $('.box').fadeIn(1000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

5、fadeOut() 方法淡出效果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">淡出效果</button>
        <p class="box">~我是fadeOut~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').fadeOut(1000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

’ QQ图片20190117120816.png

6、fadeTo(speed opacity callback) 将所有匹配到的元素的不透明度以渐进法方式调整到指定的不透明度

opcity的值介于0到1之间

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">淡入到指定值效果</button>
        <p class="box">~我是fadeTo~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').fadeTo(3000,0.3)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

7、slideDown(speed callback) 方法为下滑效果,向下增大

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">下滑效果</button>
        <p class="box">~我是slideDown~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.box').hide()
        $('.but').click(function(){
             $('.box').slideDown(3000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

8、slideUp(speed callback) 上滑效果方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">上滑效果</button>
        <p class="box">~我是slideUp~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').slideUp(3000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

9、animate(speed ,callback) 动画效果

语法：$(selector).animate({params},speed,callback)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
       }
      </style>
</head>
<body>
    <div class="content">
        <button class="but">动画效果</button>
        <p class="box">~我是animate~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').animate({fontSize:'10px'},3000)
             })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

10、stop() 动画停止效果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
           position: relative;
       }
       
       
      </style>
</head>
<body>
    <div class="content">
        <button class="but1" style="height: 40px; width: 96px;">动画效果</button>
        <button class='but2' style="height:40px;width: 96px;">停止效果</button>
        <p class="box">~我是animate~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but1').click(function(){
             $('.box').animate({
                 fontSize:'10px',
                 opacity:'0.3',
                 left:'400px',
                 width:'200px',
                 height:'200px',
                 lineHeight:'200px'
                 },3000)
             })
             //停止动画效果，可用于导航条上
             $('.but2').click(function(){
                 $('.box').stop()
             })

    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

11、参数callback ，为一个函数，当前面的动作执行完之后可以执行callback函数的效果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
      <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style>
       .content{
           margin:0 auto;
           border:1px solid gray;
           width: 200px;
           height: 200px;
           font-size: 20px;
           }
       .but{
           background-color:rgb(201, 192, 192);
           width: 200px;
           height: 40px;
           line-height: 30px;
       }
       .content p{
           background-color:rgb(241, 12, 12);
           width: 200px;
           height: 160px;
           margin-top: 0;
           text-align: center;
           line-height: 160px;
           position: relative;
       }
       
       
      </style>
</head>
<body>
    <div class="content">
        <button class="but">隐藏完callback效果</button>
        <p class="box">~我是callback~</p>
    </div>
<script type="text/javascript">

    $(function(){
        $('.but').click(function(){
             $('.box').hide(1000,function(){//funciton就是callback位置的函数
                $('body').css('background','yellow')
             })
             })
           
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

上一条：微博输入点赞功能练习-2019年1月24日22点39分下一条：购物车——1月22号

声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。

全部评论

文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多