jQuery-效果

show([speed,[easing],[fn]])

显示隐藏的匹配元素。

<p style="display: none">Hello</p>

//显示所有段落
$("p").show()

//用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
$("p").show("slow");

//用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });
 
 //将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
 $("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

hide([speed,[easing],[fn]])

隐藏显示的元素

//隐藏所有段落
$("p").hide()

//用600毫秒的时间将段落缓慢的隐藏
$("p").hide("slow");

//用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

//对表格切换显示/隐藏
$('td).toggle();

//用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("slow");

//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });
 
 //如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}      

slideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素,可以使匹配的元素以“滑动”的方式显示出来

//以滑动方式显示隐藏的 <p> 元素
$(".btn2").click(function(){
  $("p").slideDown();
});

//用600毫秒缓慢的将段落滑下
$("p").slideDown("slow");

//用200毫秒快速将段落滑下，之后弹出一个对话框
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

slideUp([speed,[easing],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素,可以使匹配的元素以“滑动”的方式隐藏起来

//用600毫秒缓慢的将段落滑上
$("p").slideUp("slow");

//用200毫秒快速将段落滑上，之后弹出一个对话框
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

//用600毫秒缓慢的将段落滑上或滑下
$("p").slideToggle("slow");

//用200毫秒快速将段落滑上或滑下，之后弹出一个对话框
$("p").slideToggle("fast",function(){
   alert("Animation Done.");
 });

fadeIn([speed],[easing],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

//用600毫秒缓慢的将段落淡入
$("p").fadeIn("slow");

//用200毫秒快速将段落淡入，之后弹出一个对话框
("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

fadeOut([speed],[easing],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

//用600毫秒缓慢的将段落淡出
$("p").fadeOut("slow");

//用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

fadeTo([[speed],opacity,[easing],[fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

//使用淡入效果来显示一个隐藏的 <p> 元素：
$(".btn2").click(function(){
  $("p").fadeIn();
});

//用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow", 0.66);

//用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

fadeToggle([speed,[easing],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

//用600毫秒缓慢的将段落淡入
$("p").fadeToggle("slow","linear");

//用200毫秒快速将段落淡入，之后弹出一个对话框
$("p").fadeToggle("fast",function(){
   alert("Animation Done.");
 });

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。

//点击按钮后div元素的几个不同属性一同变化
<button id="go"> Run</button>
<div id="block">Hello!</div>

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

//在600毫秒内切换段落的高度和透明度
$("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, "slow");
 
 //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
 $("p").animate({
   left: 50, opacity: 'show'
 }, 500);

stop([clearQueue],[jumpToEnd])

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

//停止当前正在运行的动画
$("#stop").click(function(){
  $("#box").stop();
});

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

<div id="foo /">
$('#foo').slideUp(300).delay(800).fadeIn(400);

finish( [queue ] )

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

//停止当前正在运行的动画
$("#complete").click(function(){
  $("div").finish();
});

jQuery.fx.off

关闭页面上所有的动画

  //执行一个禁用的动画
  jQuery.fx.off = true;
  $("input").click(function(){
      $("div").toggle("slow");
  });