6.jQuery效果

1. 显示与隐藏

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

1. toggle
   $(selector).toggle(speed,callback)
2. speed取值:
   1. slow
   2. fast
   3. 毫秒值

2.淡入淡出

• fadeIn()用于淡入已隐藏的元素
  • 语法:$(selector).fadeIn(speed,callback);
• fadeOut()用于淡出元素
  • 语法:$(selector).fadeOut(speed,callback);
• fadeToggle()可以再fadeIn和fadeOut之间切换
  • 语法:$(selector).fadeToggle(speed,callback);
• fadeTo()渐变为给定的不透明度（值介于 0 与 1 之间）。
  • 语法:$(selector).fadeTo(speed,opacity,callback);

3.滑动效果

• slideDown()用于向下滑动元素
  • 语法:$(selector).slideDown(speed,callback);
• slideUp()用于向上滑动元素
  • $(selector).slideUp(speed,callback);
• slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换
  • $(selector).slideToggle(speed,callback);

4.jQuery动画

• 语法:$(selector).animate({params},speed,callback);
• 默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
• animate()方法:

  $("button").click(function(){
        $("div").animate({left:'250px'});
    })

• 操作多个属性:

$("button").click(function(){
    $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
}); 

• 使用相对值:

$("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
}); 

• 使用预定义的值

$("button").click(function(){
    $("div").animate({
        height:'toggle'
    });
});

• 使用队列功能

$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
}); 

5.jQuery停止动画

• 语法:$(selector).stop(stopAll,goToEnd);

6.callback方法

• 事件完全执行完成后执行

7.jQuery的Chaining编码方式

- $("#p1").css("color","red").slideUp(2000).slideDown(2000);