[JavaScript知识库]jQuery w3school第二章，淡入/淡出、滑动、动画、stop()、Callback、chaining

1、jQuery 拥有下面四种 fade 方法：

fadeIn()? //用于淡入已隐藏的元素 (将元素显示出来) ,在样式上要先隐藏
fadeOut() //用于淡出可见元素（将元素隐藏起来）  
fadeToggle()? //如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
? ? ? ? ? ? ? ? ? ? ? //如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

fadeTo("slow","0.9")? //允许渐变为给定的不透明度（值介于 0 与 1 之间）。? ?值越大亮度越明显
注意：fadeTo里面至少要有2个值不然没有效果
    eg: fadeTo("slow",0.2,function(){
        alert(“回调函数”);
    })
    //错误写法
    fadeTo();
    fadeTo(0.3);

???Css display属性?

display:block; //默认，将有换行符
display:inline; //将没有换行符
display:none; //隐藏

2、jQuery 滑动方法

slideDown(); // 用于鼠标 点击后 向下滑动元素? ，先要将元素隐藏
slideUp()；//用于鼠标 点击后? 向上滑动元素
slideToggle()；//如果元素向下滑动，则 slideToggle() 可向上滑动它们。
? ? ? ? ? ? ? ? ? ? ? ? //如果元素向上滑动，则 slideToggle() 可向下滑动它们

?

??

3、jQuery 动画 - animate() 方法

$(selector).animate({params},speed,callback);?// {params}={left:'23px',opacity:'0.5'}?

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

注意：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

4、?jQuery stop() 方法用于在? 动画? 或 效果 完成前对它们进行停止。?

$(selector).stop();//停止
  $(selector).stop(true);//停止所有
  $(selector).stop(stopAll,goToEnd);?;//停止但要完成?

? ? 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

? ?可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

? ?因此，默认地，stop() 会清除在被选元素上指定的当前动画。

5、jQuery Callback 函数?

Callback 函数在当前动画 100% 完成之后执行。

$(selector).hide(speed,callback); //“slow”,"fast","毫秒" 隐藏
$(selector).show(speed,callback); //展现
$(selector).toggle(speed,callback);//展现、隐藏

$(selector).fadeIn(speed,callback);//淡入（展现出来）
$(selector).fadeOut(speed,callback);//淡出（隐藏起来）
$(selector).fadeToggle(speed,callback);//淡入、淡出
$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度（值介于0与1之间）

$(selector).slideDown(speed,callback);//向下滑动元素
$(selector).slideUp(speed,callback);//向上滑动元素
$(selector).slideToggle(speed,callback);//向上或向下滑动元素

$(selector).animate({params},speed,callback);//创建自定义动画,params里面可以添加多个参数,创建多个animate可以出现多种效果。

$("p").hide(1000,function()){
??slert("回调函数已启动")??????
})

6、链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

 eg:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
    $("#p1").css("color","red")  //也可
      .slideUp(2000)
      .slideDown(2000);