jQuery数据集处理函数及动画效果函数

map / each / show / hide / fadeOut / fadeIn / fadeTo / slideUp

slideDown / slideToggle /animate

本文中代码其测试页面点击此处可以查看

map & each

使用回调函数对结果集内的每个元素进行处理,回调函数接受两个参数,分别是当前元素索引和当前元素。二者的区别在于map返回回调函数返回值的新对象,each返回受回调函数影响的原始对象。
比如给所有的段落和类为foo的元素追加标签名和索引。

$("p,.foo").map(function(index, ele) {
  $(this).append("  " + ele.tagName + "  #" + index);
});

可同样使用each完成同样的功能,但是如果对追加了标签名和索引的元素集合进一步处理,比如给标签为,类为foo的元素设置一个红色的字体,黄色的背景,则应该使用each,如果使用map则无法达到期望的结果。

$("p,.foo")
  .each(function(index,ele) {
    $(this).append("  " + ele.tagName + "  #" + index);
  })
  .find("span.foo").css({"color" : "red", "background" : "yellow"});

show & hide

不带参数调用这两个函数会对元素的样式添加或删除display:none;
如 $(“#bar”).hide(); 或 $(“#bar”).show();
这样调用没有动画效果,直接显示或者直接隐藏,没有过度效果,可以通过增加过度时间参数来增加效果。
如 $(“#bar”).hide(2000); 或 $(“#bar”).show(2000);

fadeOut 、fadeIn、fadeTo

可以实现元素淡入淡出效果,fadeOut淡出,通过将元素透明度从1调整到0,来实现元素的淡出,元素淡出结束后设置元素display:none;样式,可设置持续时间参数,默认持续时间为400ms,也接受回调函数参数,在结束后被调用。fadeIn淡入,通过将元素透明度从0调整到1,来实现元素的淡入,元素淡入结束后如果元素有display:none;样式,则会移除该样式。fadeTo可指定淡入或淡出的透明度,为0至1之间的一个数值。必须提供两个参数,一个是持续时间,另一个是目标透明度,也可以通过回调函数作为第三个参数用于在调用结束后被调用。
淡入淡出函数接受两个文本的快捷持续时间,分别是fast和slow,分别对应200ms和600ms。
如将表单元素淡出,并输出对应淡出信息,再讲表单元素淡入,输出对应淡入信息。

$("form")
  .fadeOut(1000, function() {
    console.log("淡出!");
  })
  .fadeIn(1000, function() {
    console.log("淡入!");
  });

将表单淡出到50%透明度,并输出对应信息。

$("form").fadeTo(1000, 0.5, function() {
  console.log("50%透明度");
});

slideUp、slideDown、slideToggle

可以实现元素的收缩与展开,slideUp向上收缩元素,slideDown向下展开元素,slideToogle是展开和收缩的开关,当前元素处于展开状态,应用slideToggle则会收缩,当处于收缩的时候应用则会展开,收缩与展开结束后通过设置元素display:none;样式或删除该样式给用户视觉展现。都可以接受两个参数,分别是持续时间和回调函数。

$("p.foo")
  .slideUp(1000, function() {
    console.log("收缩!");
  })
  .slideDown(1000, function() {
    console.log("展开!");
  });

同样针对类为foo的段落使用slideToggle。

$("p.foo").slideToggle(1000, function() {
  $bar = $("p.foo").attr("style");
  if ($bar === "display: none;") {
    console.log("slide Up");
  } else {
    console.log("slide Down");
  }
});

animate

能利用元素绝大多数可视CSS属性制作动画,其接受两种格式的多种参数,其中第二种格式的参数有更多的选项​,分别是
animate({json target css}, duration, action, succ callback)
animate({json target css}, {json animate options})
我们给id=bar的段落增加背景色和边框,然后5秒内完成段落的长宽缩放,并输出完成信息。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate(
    {
      "width" : "500px",
      "height" : "100px"
    },
    5000,
    "swing",
    function() {
      console.log("animate complete!");
    });

采用第二种格式的参数代码如下,效果与前段一样。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate({
               "width" : "500px",
               "height" : "100px"
           },
           {
             "duration" : 5000,
             "easing" : "swing",
             "complete" : function() {
               console.log("Animate complete!");
             }
          });