jQuery_6_动画效果

 使得页面具有良好的交互性。

 

---

零、动画设置

1、时间

　　slow、normal、fast、毫秒数。

2、暂停

　　暂停指定元素正在执行的动画。

//暂停id为div_1的标签正在运行的动画效果
$('#div_1').stop();

3、关闭

　　关闭页面内的所有动画效果，注意：动画效果必须在此语句的存活期内。

function testC(){
        //禁用动画效果
    Query.fx.off = true;
    //testA方法中的所有动画效果会被禁用
        testA();
}    

function testB(){
        //此处的动画效果不会被禁用     
}

 

---

一、基本动画（优雅）

1、隐藏

　　无动画：设置标签的可见性为不可见。

//隐藏所有的p标签
$("p").hide() 

　　平滑动画：以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

//获取标签
var div_1 = $("#div_1");
//2s内消失，执行回调函数
div_1.hide(2000,testB);

//回调函数
function testB(){
    alert("this is testB");
}

2、出现

　　无动画：设置标签可见性为可见。

//显示所有被隐藏的p标签，（display: none）
$("p").show() 

　　平滑动画：以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

//获取标签
var div_1 = $("#div_1");
//设置标签不可见
div_1.hide();
//2s内出现，执行回调函数
div_1.show(2000,testB);

//回调函数
function testB(){
    alert("this is testB");
}

3、切换可见性

　　无动画：切换元素的可见状态。

//切换所有段落的可见状态。 
$("p").toggle() 

　　平滑动画：以优雅的动画切换所选中元素的可见状态，并在显示完成后可选地触发一个回调函数。

//3s内切换可见状态，执行回调函数
div_1.toggle(3000,testB);

---

二、上下滑动

1、出现

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

//获取标签
var div_1 = $("#div_1");
//设置标签不可见
div_1.hide();
//以缓慢的速度内由上至下滑动出现，执行回调函数
div_1.slideDown('slow',testB);

//回调函数
function testB(){
    alert("this is testB");
}

2、隐藏

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

//以较快的速度由下至上滑动隐藏，执行回调函数
div_1.slideUp(fast,testB);

3、切换可见性

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

//3s内通过上下滑动切换可见状态，执行回调函数
div_1.slideToggle(3000,testB);

---

三、淡入淡出

只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。(框体直接出现，直接消失)

1、出现

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

//所有的p段落在6s内出现
$("p").fadeIn("slow"); 

　　指定不透明度出现

//用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度 
$("p").fadeTo("slow", 0.66);

2、淡出

//所有的p段落在6s内消失
$("p").fadeOut("slow"); 

3、切换状态

//使用淡入淡出的效果切换可见性
div_1.fadeToggle('slow');