Web实训知识点——0409

一.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
代码实现：

  #slide,#panel{
      padding: 5px;
      text-align: center;
      background-color: #33b5e5;
      border: solid 1px red;
  }
  #panel{
      display: none;
      padding: 40px;
  }

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

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

开始动画

默认情况下，所以的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需要将元素的position的属性设置为：absolute，relatIve，fixed；

2.通过animate（），操作多个属性 代码实现：

    $(document).ready(function(){
        $("#button").click(function(){
            $("div").animate({
                left:"200px",opacity:'0.5',height:'160px',width:'160px'
            })
        })
    })

注意：使用animate（）方法的时候，必须使用camel标记法书写所有的属性名。【CSS：background-color
camel：backgroundColor】
3.animate（）：使用相对值
代码实现：

    $(document).ready(function(){
        $("#button").click(function(){
            $("div").animate({
                left:"200px",opacity:'0.5',height:'160px',width:'160px'
            })
        })
    })

4.通过animate（），使用队列功能（如果你在彼此 之后向编写多个animate（）调用。jQuery会创建包含这些方法调用的“内部”，队列然后逐一运行这些animate调用）
代码实现：

    $(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)
            div.animate({height:"100px" ,opacity:"0.9"},1000)
            div.animate({fontSize:"10px" },1000)
        })
    })

四.jQuery停止动画（暂停）
方法：stop（） 【stop（）用于在动画完成前对他进行停止。只能暂停队列中的一个动画，如果队列有多个动画，那么暂停该动画，然后系统会执行后面的动画。】
代码实现：

    $(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()
        })
          })
            })

五. jQuery-----链（chaining）
chaining的优点：浏览不用多次去查找相同的元素
注释：通过jQuery可以把方法链接到一起chaining允许我们在一条语句中运行多个jQuery方法（在相同的元素上）。
eg:【KaTeX parse error: Expected '}', got 'EOF' at end of input: …"bule"}1000)】=【("#p1").css({color:“red”})
$("#p1").slideUp{1500}
$("#p1").slideDown{1500}
$("#p1").animate({backgroundColor:“bule”}1000)
】
注释：#p1元素首先会变红，然后向上以1,5秒的速度移动，然后向下以1.5秒的速度移动。最后将背景色变为红色。