jQuery

jQuery 效果

jQuery - 隐藏/显示

• jQuery hide() - 隐藏

$("#hide").click(function () {
   $("p").hide(); 
});

• jQuery show() - 显示

$("#show").click(function () {
   $("p").show(); 
});

• 语法

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

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒值
• 可选的 callback 参数是隐藏/显示完成后所执行的函数名称

// 该实例演示了带有 speed 参数的 hide() 方法
$("button").click(function () {
   $("p").hide(3000); 
});

// 该实例演示了带有 speed 参数的 hide() 方法，并使用回调函数
$(document).ready(function () {
   $("hidebtn").click(function () {
       $("div").hide(1000,"linear",function () {
          alert("hide() 方法已完成！"); 
       });
   }) ;
});

• 参数 "linear" 表示过渡使用哪种缓动函数，jQuery 自身提供 "linear" 和 "swing"，其他可以使用相关插件

jQuery toggle()

• 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法

• 显示被隐藏的元素，并隐藏已显示的元素

• 语法

$(seelector).toggle(speed,callback);

$("button").click(function(){
  $("p").toggle(1000);
});

jQuery - 淡入/淡出

jQuery Fading 方法

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn() 方法

• jQuery fadeIn() 用于淡入已隐藏的元素

• 语法

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

• 实例

$("button").click(function () {
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

• jQuery fadeOut() 用于淡入出可见的元素

• 语法

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

• 实例

$("button").click(function () {
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

• jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

• 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果

• 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

• 语法

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

• 实例

$("button").click(function () {
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

• jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

• 语法

$(selector).fadeTo(speed,opacity,callback);

• 实例

$("button").click(function () {
    $("#div1").fadeTo("slow",0.12);
    $("#div2").fadeTo("slow",0.5);
    $("#div3").fadeTo("fast",0.85);
});

jQuery - 滑动

jQuery 滑动方法

• 通过 jQuery，您可以在元素上创建滑动效果
  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法

• jQuery slideDown() 方法用于向下滑动元素
• 语法

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

• 实例

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法

• jQuery slideUp() 方法用于向上滑动元素
• 语法

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

• 实例

$("#flip").click(function(){
  $("#panel"). slideUp();
});

jQuery slideToggle() 方法

• jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
• 语法

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

• 实例

$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery - 动画

jQuery 动画 - animate() 方法

• jQuery animate() 方法用于创建自定义动画
• 语法

$(selector).animate({params},speed,callback);

• 必需的 params 参数定义形成动画的 CSS 属性
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
• 可选的 callback 参数是动画完成后所执行的函数名称

// 例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素
$("button").click(function(){
  $("div").animate({left:'250px'});
});

• 注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
  如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

jQuery animate() - 操作多个属性

• 生成动画的过程中可同时使用多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    '150px'
  });
});

jQuery animate() - 使用相对值

• 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    '+=150px'
  });
});

jQuery animate() - 使用预定义的值

• 可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQuery animate() - 使用队列功能

• 默认地，jQuery 提供针对动画的队列功能
• 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
});

• 下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery stop() - 停止动画

• jQuery stop() 方法用于停止动画或效果，在它们完成之前
• stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
• 语法

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

• 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
• 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
• 因此，默认地，stop() 会清除在被选元素上指定的当前动画

$("#stop").click(function(){
  $("#panel").stop();
});

jQuery callback() - 回调函数

• callback() 函数在当前动画 100% 完成之后执行

// 以下实例在隐藏效果完全实现后回调函数
$("button").click(function () {
   $("p").hide("slow",function () {
       alert("段落现在被隐藏了...");
   }) ;
});

// 以下实例没有回调函数，警告框会在隐藏效果完成前弹出
$("button").click(function () {
   $("p").hide("slow");
    alert("段落现在被隐藏了...");
});

jQuery Chaining - 链

• 通过 jQuery 可以把动作/方法链接在一起
• Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

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

• 当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进

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

• jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行