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
a.规定当ready事件发生时执行的代码。
b.slideToggle():通过滑动效果（高度变化）来切换元素的可见状态。
代码实现：

#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"})
        })
    })