效果

1、隐藏和显示：

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

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

$(selector).toggle(speed,callback);  //使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

2、淡入淡出：

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

3、滑动

$(selector).slideDown(speed,callback); //向下滑动

$(selector).slideUp(speed,callback); //向上滑动

$(selector).slideToggle(speed,callback);

4、动画

animate() 方法：

$(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性。

实例：

把 <div> 元素往右边移动了 250 像素：

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

5、停止动画

stop() 方法：

stop() 方法用于停止动画或效果，在它们完成之前。

$(selector).stop(stopAll,goToEnd);

6、Callback 方法

Callback 函数在当前动画 100% 完成之后执行。

以下实例在隐藏效果完全实现后回调函数：

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

如果没有回调函数，警告框会在隐藏效果完成前弹出：

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

7、Chaining方法链接

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

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