WEB实训知识点-0409

最新推荐文章于 2023-12-28 22:11:24 发布

花姑娘丶

最新推荐文章于 2023-12-28 22:11:24 发布

阅读量82

点赞数

本文链接：https://blog.csdn.net/jufkgo/article/details/89289025

版权

知识点：

一.jQuery的动画显示（显示和隐藏动画效果）
两个方法：hide（）和show（）来实现
代码实现：

$(document).ready(function(){
        $("#button1").click(function(){
           $ ( "p").hide(500,function(){
               alert("隐藏完成")
           })
        })
        $("#button2").click(function(){
            $( "p").show(200,function(){
                alert("显示成功")
            })
        })

二.jQuery的动画效果（滑动）
有两个方法：#slide和#panel
代码实现：

<style>
      #slide,#panel{
          padding: 5px;
          text-align: center;
          background-color: #33b5e5;
          border: solid 1px red;
      }
      #panel{
          display: none;
          padding: 40px;
      }
  </style>
    <script>
    $(document).ready(function(){
       $("#slide").click(function(){
       $("#panel").slideToggle()
    })
    })
    </script>
</head>
<body>
<div id = "slide"> 点我滑动或者隐藏</div>
<div id = "panel"> hello</div>
</body>

三.jQuery的动画效果（动画）
方法：animate（）用于创建自定义动画
语法：$(select).animate({params},speed,callback) 必须的params参数定义形成动画的CSS属性而且可选的参数和其几个参数相同。
1.通过animate（）使效果向右移动200
代码实现：

<head>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:"20px"},1000,function(){
                $("div").css({background:"yellow"})
            })
        })
    })
    </script>
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所以的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需要将元素的position的属性设置为：absolute，relatIve，fixed；</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

2.通过animate（），操作多个属性

<script>
        $(document).ready(function(){
            $("#button").click(function(){
                $("div").animate({
                    left:"200px",opacity:'0.5',height:'160px',width:'160px'
                })
            })
        })
   </script>
</head>
<body>
<input type="button" value="开始动画" id="button">
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

四.jQuery停止动画（暂停）

方法：stop（）

stop（）用于在动画完成前对他进行停止。只能暂停队列中的一个动画，如果队列有多个动画，那么暂停该动画，然后系统会执行后面的动画。

<script>
        $(document).ready(function(){
            $("#button").click(function(){
                var div= $("div")
                div.animate({height:"160px" ,opacity:"0.5"},1000)
                div.animate({fontSize:"2px" },1000)
                div.animate({width:"160px" ,opacity:"0.9"},1000)
                div.animate({height:"100px" ,opacity:"0.5"},1000)
              17:01 2019/4/9  div.animate({height:"100px" ,opacity:"0.9"},1000)
                div.animate({fontSize:"10px" },1000)
            })
   $("#button1").click.(function(){
               $("div").stop()
            })
        })
    </script>
</head>
<body>
<input type="button" value="开始动画" id="button">
<input type="button" value="暂停动画" id="button1">
<div style="background-color: red;height: 100px;width: 100px;position: absolute">hello world</div>
</body>

花姑娘丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB实训知识点-0409

知识点：一.jQuery的动画显示（显示和隐藏动画效果）两个方法：hide（）和show（）来实现代码实现：$(document).ready(function(){ $("#button1").click(function(){ $ ( "p").hide(500,function(){ alert("隐藏完成") ...
复制链接

扫一扫