jQuery学习之---效果

今天继续学习一下jQuery，主要记录一下jQuery的那些效果显示

1.animate() 函数

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

语法如下：$(selector).animate(styles,speed,easing,callback)

 

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数： swing linear
callback	可选。animate 函数执行完之后，要执行的函数。

例：

  $(".btn1").click(function(){
    $("#box").animate({height:"300px", width:"200px", margin:"200px"}, "slow", function(){alert("animate");});

2.fadeIn()和fadeOut()函数

这两个一般都是成对出现的，fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

语法如下：$(selector).fadeOut(speed,callback)           　　$(selector).fadeIn(speed,callback)

例：

  $(".btn1").click(function(){
  $("p").fadeOut()
  });
  $(".btn2").click(function(){
  $("p").fadeIn();
  });

3.toggle()函数

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法如下：$(selector).toggle(speed,callback,switch)

speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。 True - 显示所有元素 False - 隐藏所有元素 如果设置此参数，则无法使用 speed 和 callback 参数。

例：

$("p").toggle();