jQuery效果总结

• 隐藏/显示
  jQuery hide()和show()：

$("#hide").click(function(){
    $("p").hide();
});
$("#show").click(function(){
    $("p").show();
});
// 也可以使用带参数的 $("p").show(2000);

jQuery toggle()：

//用来切换hide()和show()方法，显示被隐藏的元素或隐藏已显示的元素。
$("button").click(function(){
    $("p").toggle();
});
// 同样可以使用带参数的 $("p").toggle(2000);

• 淡入淡出
  fadeIn()、fadeOut()、fadeToggle()、fadeTo()

$("button").click(function(){
    // 淡入效果，可以带参数，淡入的时间（毫秒）
    $("div1").fadeIn();
    $("div2").dadeIn(1000);
    // 淡出效果，带参数为淡出时间
    $("div1").fadeOut();
    $("div2").fadeOut(2000);
    // fadeToggle()用于fadeIn()和fadeOut()之间切换
    $("div1").fadeToggle();
    $("div2").fadeToggle("slow");
    // fadeTo()用于渐变为指定的不透明度（0-1之间）
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo(2000,0.4);
});

• 滑动
  jQuery slideDown()、slideUp()、slideToggle()

$('button').click(function(){
    // slideDown()用于向下滑动元素
    $('p#in').slideDown('slow');
    //  slideUp()用于向上滑动元素
    $('p#out').slideUp(3000);
    // slideToggle()用于slideDown()和slideUp()之间切换
    $("p#toggle").slideToggle();
});

• 动画
  $(selector).animate({params},speed,callback);
  params为比传，speed和callback可选

$('button').click(function(){
    // 将一个<div>移动到左边
    $('div').animate({left:'100px'});
    // 也可以同时操作多个属性
    $('div').animate({left:'200px', opacity:'0.4', height:'100px', width:'50px'});
    // 或者相对属性值
    $('div').animate({left:'200px', height:'+=100px', width:'+=50px'});
    // 使用动画集合
    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");
});

• stop()
  jQuery stop()方法用于停止正在之行的动画或效果。
  $(selector).stop(stopAll,goToEnd);
  stopAll为可选，是否清楚队列，默认为false，仅停止动画；
  goToEnd为可选，是否立即完成当前动画，默认为false；

$(document).ready(function(){
    $("#flip").click(function(){
        $("p").slideDown(4000);
    });
    $("#stop").click(function(){
        $("p").stop();
    });
});

• Callback
  在所有效果之行结束后都可以使用callback来之行其他动作，比如：

$("button").click(function(){
    $("p").hide(1000,function(){
        alert("<p>隐藏了");
    });
});

• Chaining
  跟其他语言一样，jQuery也可以对同一个元素之行多条命令，如：

//把<p>字体颜色变红，向上移动后再向下移动
$("p").css("color","red").slideUp(1000).slideDown(1000);