jQuery效果小结

学习笔记，具体移步https://www.w3school.com.cn/jquery/jquery_hide_show.asp

一、隐藏/显示

• hide()
• show()
• toggle()

1. hide() 和 show()

语法：

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

例子：

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

2. toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法

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

例子：

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

二、淡入淡出

• fadeIn():淡入已隐藏的元素
• fadeOut() :淡出可见元素
• fadeToggle(): 在 fadeIn() 与 fadeOut() 方法之间进行切换
• fadeTo():允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeIn(speed,callback);//fadeOut(),fadeToggle()一样
$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

三、滑动

• slideDown():在元素上创建滑动效果
• slideUp():在元素下创建滑动效果
• slideToggle():在 slideDown() 与 slideUp() 方法之间进行切换

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

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

四、动画

animate() 方法

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

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

注意：

• params参数是结束的css状态
• 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
• 使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left

1. 操作多个属性

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

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

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

3. 使用预定义的值
   把属性的动画值设置为 “show”、“hide” 或 “toggle”：

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

4. 使用队列功能（逐个动）
   下面的例子先把
   元素移动到右边，然后增加文本的字号：

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

五、停止动画

stop() 方法用于停止动画或效果，在它们完成之前。
默认地，stop() 会清除在被选元素上指定的当前动画

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

六、callback

如果希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数

错误：
$("p").hide(1000);
alert("The paragraph is now hidden");
正确：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

callback 参数是一个在 hide 操作完成后被执行的函数。

七、Chaining

Chaining可以把动作/方法链接起来，允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
这样写也可以运行：
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);