动画效果

//滑动

      //行内样式 height
      //动画路线  上<->下  和show一样

 

slideDown
slideUp
slideToggle
 //淡入淡出
            //行内样式 opacity 0<->1
fadeTo
fadeToggle
fadeOut
fadeIn
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
           height: 200px;
           width: 200px;
           background-color: red;

 

        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //改变的是行内样式  display属性
            //隐藏  display:none  显示display: 原始值   如果没有原始值，则删除display样式
            //带时间的路线  左上角<-->右下角
            $(".show").click(function(){
                //$("div").show()
                //$("div").show("slow")  normal  fast
                $("div").show(1000)
            })
            $(".hide").click(function(){
                $("div").hide()
            })
            $(".toggle").click(function(){
                $("div").toggle()
            })

 

            //滑动
            //行内样式 height
            //动画路线  上<->下  和show一样
            $(".slideDown").click(function(){
                $("div").slideDown(3000)
            })
            $(".slideUp").click(function(){
                $("div").slideUp()
            })
            $(".slideToggle").click(function(){
                //$("div").stop().slideToggle(3000)终止动画，删除所有排队的动画，在最后一次动画基础上，继续新动画
                //$("div").finish().slideToggle(3000)完成所有动画，开始新动画
            })

 

            //淡入淡出
            //行内样式 opacity 0<->1
            $(".fadeIn").click(function(){
                $("div").fadeIn()
            })
            $(".fadeOut").click(function(){
                $("div").fadeOut(3000)
            })
            $(".fadeToggle").click(function(){
                $("div").fadeToggle()
            })
            $(".fadeTo").click(function(){
                $("div").fadeTo("normal",0.3)
            })
            //自定义动画
            $(".animate").click(function(){
                //$("div").animate({width:"400px"},1000)
                //$("div").animate({width:"400px",height:"400px",opactiy:0.3},1000)
                $("div").animate({width:'+=40px',height:'+=40px',opactiy:0.3},1000)
            })
        })
    </script>
</head>
<body>
    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    <br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <br>
    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo(0.3)</button>
    <br>
    <button class="animate">animate</button>
    <div></div>
</body>
</html>
posted @ 2021-11-15 07:47  与神明画过押  阅读(91)  评论(0)    收藏  举报