jQuery学习笔记2——jQuery简易效果

接上次的jQuery学习笔记，这次的主题就是其简易效果，例如淡入淡出，显示隐藏的效果。

----------------------------------------------------------------------------------------------------------------------------------

整理网上的资料，可以得到这样一个方法列表。

 

 

 

 

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	移除下一个排队函数，然后执行函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
finish()	对被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
queue()	显示被选元素的排队函数
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上当前正在运行的动画
toggle()	hide() 和 show() 方法之间的切换

基本方法如上，分别介绍一些方法来强化学习效果。

----------------------------------------------------------------------------------------------------------------------------------

显示/隐藏 与 淡入/淡出

我个人理解这两种方法在显示列表或者点开显示详细介绍等方面用的比较多，给div标签一个类，或者id对其进行操作。

显示/隐藏

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

淡入/淡出

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

这上面的5个方法的参数列表都一样，speed可以控制方法的效果持续时长，可以取slow，fast或者一个具体的毫秒数值。第二个参数可以传一个方法，这个方法将在外层方法完全执行完毕之后再执行。比如按照下面这种写法：

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("I have gone away.");
  });
});

在hide()方法完全执行结束后，将执行带有alert的方法。

名字中带有toggle的方法表示同一个方法可以先后执行显示/隐藏的两种功能，比如说第一次执行隐藏，第二下就可以再显示出来。参照这个命名规则，上面列表里的函数都有类似的功能。

----------------------------------------------------------------------------------------------------------------------------------