jquery简介之改变样式和动画效果

改变样式

 

css(name|pro|[,val|fn]) 返回值:String 

访问匹配元素的样式属性。

参数

name   String     要访问的属性名称

properties  Map  要设置为样式属性的名/值对

name,value          String, Number      属性名,属性值

name,function(index, value)String,Function  1:属性名  2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

示例

参数name 描述:

取得第一个段落的color样式属性的值。

jQuery 代码:
$("p").css("color");

参数properties 描述:

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });

参数name,value 描述:

将所有段落字体设为红色

jQuery 代码:
$("p").css("color","red");

参数name,回调函数 描述:

逐渐增加div的大小

jQuery 代码:
  $("div").click(function() {

    $(this).css({

      width: function(index, value) {

        return parseFloat(value) * 1.2;

      },

      height: function(index, value) {

        return parseFloat(value) * 1.2;

      }

    });

  });

CSS 类

1.addClass(class|fn)

为每个匹配的元素添加指定的类名。

参数   

class   String    一个或多个要添加到元素中的CSS类名，请用空格分开

function(index, class)      Function    此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

为匹配的元素加上 'selected' 类

jQuery 代码:
$("p").addClass("selected");

$("p").addClass("selected1 selected2");

回调函数 描述:

给li加上不同的class

HTML 代码:

<ul>

      <li>Hello</li>

      <li>Hello</li>

      <li>Hello</li>

</ul>
jQuery 代码:
$('ul li:last').addClass(function() {

  return 'item-' + $(this).index();

});

 

2.removeClass([class|fn])  概述   从所有匹配的元素中删除全部或者指定的类。参数class   String    一个或多个要删除的CSS类名，请用空格分开

function(index, class)    此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

从匹配的元素中删除 'selected' 类

jQuery 代码:

$("p").removeClass("selected");

参数class 描述:

删除匹配元素的所有类

jQuery 代码:
$("p").removeClass();

回调函数描述:

删除最后一个元素上与前面重复的class

jQuery 代码:
$('li:last').removeClass(function() {

    return $(this).prev().attr('class');

});

3.toggleClass(class|fn[,sw]) 返回值:jQuery  如果存在（不存在）就删除（添加）一个类。

参数

class  String          CSS类名

class,switchString,Boolean  1:要切换的CSS类名.  2:用于决定元素是否包含class的布尔值。

switchBoolean     用于决定元素是否包含class的布尔值。

function(index, class,switch)[, switch] Function,Boolean   1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。2: 一个用来判断样式类添加还是移除的 boolean 值。

示例

参数class 描述:

为匹配的元素切换 'selected' 类

jQuery 代码:

$("p").toggleClass("selected");

参数class,switch 描述:

每点击三下加上一次 'highlight' 类

HTML 代码:
<strong>jQuery 代码:</strong>

jQuery 代码:

  var count = 0;

  $("p").click(function(){

      $(this).toggleClass("highlight", count++ % 3 == 0);

  });

回调函数 描述:

根据父元素来设置class属性

jQuery 代码:
$('div.foo').toggleClass(function() {

  if ($(this).parent().is('.bar') {

    return 'happy';

  } else {

    return 'sad';

  }

});

动画效果

基本

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

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

参数

speed[,fn]Number/String,FunctionV1.0speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

 

示例

1.描述:显示所有段落

HTML 代码:

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

jQuery 代码:
$("p").show()

2.描述:用缓慢的动画将隐藏的段落显示出来，历时600毫秒。

HTML 代码:
<p style="display: none">Hello</p>

jQuery 代码:
$("p").show("slow");

3.描述:用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！

HTML 代码:

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

jQuery 代码:
$("p").show("fast",function(){

   $(this).text("Animation Done!");

 });

描述:
将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。

HTML 代码:

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

jQuery 代码:
$("p").show(4000,function(){

   $(this).text("Animation Done...");

 });

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

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

参数

speed[,fn]Number/String,Function  speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)   fn:在动画完成时执行的函数，每个元素执行一次。

[speed],[easing],[fn]Number/String,String,Function      speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)  easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"    fn:在动画完成时执行的函数，每个元素执行一次。

示例描述:隐藏所有段落

jQuery 代码:

$("p").hide()

描述:用600毫秒的时间将段落缓慢的隐藏

jQuery 代码:

$("p").hide("slow");

描述:用200毫秒将段落迅速隐藏，之后弹出一个对话框。

jQuery 代码:

$("p").hide("fast",function(){

   alert("Animation Done.");

 });

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

返回值:jQuery 

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

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

参数

fn,fn2,[fn3,fn4,...]Function,....         fn:第一数次点击时要执行的函数。fn2:第二数次点击时要执行的函数。fn3,fn4,...:更多次点击时要执行的函数。

 

[speed] [,fn]String,Function          speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。" fn:在动画完成时执行的函数，每个元素执行一次。

 

[speed], [easing ], [fn ] String,String,Function                 speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn:在动画完成时执行的函数，每个元素执行一次。

 

switch Boolean   用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

示例无参数描述:对表格切换显示/隐藏

jQuery 代码:

$('td).toggle();

 

fn,fn2描述:对表格的切换一个类

jQuery 代码:

$("td").toggle(

  function () {

    $(this).addClass("selected");

  },

  function () {

    $(this).removeClass("selected");

  }

);

speed 描述:

用600毫秒的时间将段落缓慢的切换显示状态

jQuery 代码:

$("p").toggle("slow");

 

speed,fn 描述:用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。

jQuery 代码:

$("p").toggle("fast",function(){

   alert("Animation Done.");

 });

switch参数描述:如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

jQuery 代码:

$('#foo').toggle(showOrHide);

//相当于

if (showOrHide) {

  $('#foo').show();

} else {

  $('#foo').hide();

}     

 

滑动

1.slideDown([spe],[eas],[fn])

返回值:jQueryslideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

参数
speed[,fn]Number/String,FunctionV1.0speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 

fn:在动画完成时执行的函数，每个元素执行一次。

 

[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

 

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

 

fn在动画完成时执行的函数，每个元素执行一次。

 

示例描述:以滑动方式显示隐藏的 <p> 元素：

jQuery 代码:

$(".btn2").click(function(){

  $("p").slideDown();

});

 

描述:用600毫秒缓慢的将段落滑下

jQuery 代码:

$("p").slideDown("slow");

 

描述:用200毫秒快速将段落滑下，之后弹出一个对话框

jQuery 代码:
$("p").slideDown("fast",function(){

   alert("Animation Done.");

 });

 

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

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

参数

speed[,fn]Number/String,Function
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

[speed],[easing],[fn]Number/String,String,Function
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例

描述:用600毫秒缓慢的将段落滑上

jQuery 代码:

$("p").slideUp("slow");描述:

用200毫秒快速将段落滑上，之后弹出一个对话框

jQuery 代码:

$("p").slideUp("fast",function(){

   alert("Animation Done.");

 });

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

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

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

参数

speed[,fn]Number/String,Function
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

[speed],[easing],[fn]Number/String,String,Function
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例

描述:用600毫秒缓慢的将段落滑上或滑下

jQuery 代码:

$("p").slideToggle("slow");

描述:用200毫秒快速将段落滑上或滑下，之后弹出一个对话框

jQuery 代码:

$("p").slideToggle("fast",function(){

   alert("Animation Done.");

 });

淡入淡出

1.fadeIn([speed],[eas],[fn]) 

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

参数

[speed],[easing],[fn]Number/String,String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例

描述:用600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeIn("slow");

描述:用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:

("p").fadeIn("fast",function(){

   alert("Animation Done.");

 });

2.fadeOut([speed],[eas],[fn]) 

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

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

参数
[speed],[easing],[fn]Number/String,String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例描述:用600毫秒缓慢的将段落淡出

jQuery 代码:
$("p").fadeOut("slow");描述:

 

用200毫秒快速将段落淡出，之后弹出一个对话框

jQuery 代码:

$("p").fadeOut("fast",function(){

   alert("Animation Done.");

 });

3.fadeTo([[spe],opa,[eas],[fn]])

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

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

参数

[speed],opacity,[easing],[fn]Number/String,String,Function

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例:使用淡入效果来显示一个隐藏的 <p> 元素：

jQuery 代码:

$(".btn2").click(function(){

  $("p").fadeIn();

});

描述:用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

jQuery 代码:

$("p").fadeTo("slow", 0.66);

描述:用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

jQuery 代码:
$("p").fadeTo("fast", 0.25, function(){

   alert("Animation Done.");

 });

 

4.fadeToggle([speed,[eas],[fn]])

 

 

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

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

参数

[speed],[easing],[fn]Number/String,String,FunctionV1.4.4speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

示例描述:用600毫秒缓慢的将段落淡入

jQuery 代码:
$("p").fadeToggle("slow","linear");

描述:用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:
$("p").fadeToggle("fast",function(){

   alert("Animation Done.");

 });