Jquery-重要六种效果展示（隐藏，淡入，滑动，动画，Callback，链方法）

Jquery效果展示

1.隐藏/出现

• hide（）和show方法可以实现隐藏出现的效果
• 这个往往搭配点击事件一起使用

bu.click(function(){
      di.hide();
    })

2.淡入/淡出

• fadeToggle（）可以同时实现淡入淡出的效果，里面的参数是时间
• fadeIn（）和fadeDown（）分别是淡入和淡出，里面的参数是时间
• fadeTo（）可以使颜色变淡，里面的参数是变淡的程度和时间

shhi.click(function(){
    di1.fadeToggle(3000);
    di2.fadeToggle(2000);
    di3.fadeToggle(1000);
  })

$(document).ready(function(){
    z1=$("#z1");
    z2=$("#z2");
    z3=$("#z3");
    s=$(".s");
    s.click(function(){
      z1.fadeTo(1000,0.8);
      z2.fadeTo(1000,0.5);
      z3.fadeTo(1000,0.1);
    })
  })

3.滑动

• slideDown（）可以使元素下滑，参数都是时间
• slideUp（）可以使元素上滑
• slideToggle（）可以上下滑
• 注意可以设置元素的display属性为none，那么这个元素就不会显示了，但可以滑动出来

$(document).ready(function(){
      head=$("#head");
      text1=$("#text1");
      head.click(function(){
          text1.slideToggle(500);
      })
  })

4.动画效果/动画停止

• animate（{x}，y）x里面是改变属性，y是时间
• 注意1：x里面属性的大小要加“引号”
• 注意2：x里面换下一个属性不是分号，是逗号
• 注意2：animate有先后顺序，多个animate存在是，先执行先出现的，倘若同一个animate有同样的属性时，后来的覆盖先前的
• 动画停止有3种：我更常用第二个
• stop（）：按钮停止当前激活的动画，但之后我们能再动
• stop（true）：按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止
• stop（true，true）：快速完成动作，并停止它

$(document).ready(function(){
    mu=$(".mu");
    div=$("#z1");
    mu.click(function(){
      div.animate({
        left:"500px",
        width:"200px",//或者写成hwidth:'+=100px';
        height:"-=100px",
        opacity:"0.2",
        // backgoundColor:"red"
      })
      div.animate({
        height:'+=100px',
        opacity:'1'
      })
    })
  })

5.Callback方法

• 意思是是在效果执行完成后，实现一个回调函数
• 好处：平常alert（）不会等你执行前面的元素，但现在可以先执行我们先前的，在alert（）
• 这个是有有回调

st.click(function(){
      div.animate({
        height:'500px'
      }, 2000, function (){alert('动画完成') })
    })
    st2.cl

• 这个是没有回调

st2.click(function(){
      div.animate({
        height:'500px'
      }, 2000)
      alert('动画完成')//这里没有callback的回调
    })

6.链方法

• jquery可以进行多个效果的执行，有先后顺序，先出现的先执行

st.click(function(){
      div.animate({height:'+=200px'},1000)
      .slideUp(2000)
      .slideDown(2000)
    })