一、显示和隐藏动画

  • 实现简单显示动画效果方法show()
  • 实现简单隐藏动画效果方法hide()
  • 实现切换简单显示和隐藏动画效果方法toggle()
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;//设置元素不可见
            }
        </style>
        
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function fun1(){
                // 设置元素展开时的动画效果
                //参数说明 show(时长为毫秒，动画样式，动画加载完成后执行的代码)
                $("#d1").show(5000,'swing',function(){
                    alert("你猜呀！！！")
                })
            }
            function fun2(){
                // 收起来的时候动画展示
                $("#d1").hide(5000)
            }
            function fun3(){
                // 如果元素展开点击则会收起来，如果收起来了点击则会展开
                $("#d1").toggle()
            }
            function fun4(){
                
            }
        </script>
    </head>
    <body>
        <div id="d1">
            helloword
        </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>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;//设置元素不可见
            }
        </style>
        
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function fun1(){
                // 向下滑动 展开元素
                $("#d1").slideDown(5000)
            }
            function fun2(){
                // 向上滑动，收起元素
                $("#d1").slideUp(5000)
            }
            function fun3(){
                // 如果元素展开点击则会收起来，如果收起来了点击则会展开
                $("#d1").slideToggle()
            }
            function fun4(){
                
            }
        </script>
    </head>
    <body>
        <div id="d1">
            helloword
        </div>
        
        <input type="button" value="slideDown" onclick="fun1()"/>
        <input type="button" value="slideUp" onclick="fun2()"/>
        <input type="button" value="slideToggle" onclick="fun3()"/>
    </body>
</html>

三、淡入淡出动画效果

  • 实现淡入动画效果方法fadeIn
  • 实现淡出动画效果方法fadeOut
  • 实现淡入淡出切换效果方法fadeToggle
  • 实现淡入之指定透明度效果方法fadeTo
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;//设置元素不可见
            }
        </style>
        
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function fun1(){
                //展开元素，颜色由浅到深
                $("#d1").fadeIn(5000)
            }
            function fun2(){
                // 收起来的时候演示由深到浅
                $("#d1").fadeOut(5000)
            }
            function fun3(){
                // 如果元素展开点击则会收起来，如果收起来了点击则会展开
                $("#d1").fadeToggle()
            }
            function fun4(){
                //自定义透明度 透明度由0-1直接的数字代替
                $("#d1").fadeTo(5000,0.2)//0.2代指透明度
            }
        </script>
    </head>
    <body>
        <div id="d1">
            helloword
        </div>
        
        <input type="button" value="fadeIn" onclick="fun1()"/>
        <input type="button" value="fadeOut" onclick="fun2()"/>
        <input type="button" value="fadeToggle" onclick="fun3()"/>
        <input type="button" value="fadeTo" onclick="fun4()"/>
    </body>
</html>

四、自定义动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                //$("").animate({动画内容以json格式},执行时间,动画结束后要执行的方法)
                $("#d1").animate({
                    width: "600px",
                    height: "600px",
                    opcity: 0.5,//透明度
                    borderRadius:"300px", //设置圆角以多少为半径的圆
                },5000,function(){
                    alert("执行结束")
                })
            })
            
        </script>
    </head>
    <body>
        <div id="d1">
            小丫小二郎
        </div>
    </body>
</html>