jquery動畫效果學習筆記（8種效果）

2024-05-06 16:25:05

字體：大中小

來源：轉載

供稿：網友

這篇文章分享了一份jquery動畫效果學習筆記，針對jquery動畫效果進行細致解析，對淡入淡出效果、滑動效果進行原理講解，想要學好jquery動畫效果，就耐心閱讀本文，相信大家會有意想不到的收獲。

1、元素的顯示和隱藏

display:none; 隱藏

display:block; 顯示

簡單顯示和隱藏方法

a) show() 顯示

b) hide() 隱藏

c) toggle() 開關，顯示則隱藏，隱藏則顯示

<script type="text/javascript">

function f1(){

//隱藏

$("div").hide();//display:none

//document.getElementById('id').style.display="none";

}

function f2(){

//顯示

$("div").show();//display:block

}

function f3(){

$("div").toggle();

}

</script>

<style type="text/css">

div {width:300px; height:200px; background-color:blue;}

</style>

<body>

<div>duck and dog</div>

<input type="button" value="隱藏" onclick="f1()" />

<input type="button" value="顯示" onclick="f2()" />

<input type="button" value="開關效果" onclick="f3()" />

</body>

CSS支持兩種方法顯示和隱藏元素，即使用visibility或display樣式，他們控制元素顯示和隱藏的時候效果相同，但是結果卻不同。

具體說明如下：

visibility 屬性在隱藏元素的時候，同時會保存元素在文檔流中的影響力，隱藏后元素的未知保持不變。該屬性包括visible(默認)和hidden兩個值。

display 隱藏后，隱藏的元素不再占用文檔的位置。

2、滑動效果顯示和隱藏

slideUp(speed[,callback]) 向上滑動元素并最終隱藏

slideDown(speed[,callback]) 向下滑動元素并最終顯示

slideToggle(speed[,callback])

speed：設置效果的速度(slow(600)normal(400) fast(200) 時間(毫秒))

callback: 效果執行完畢之后自動調用的回調函數

<script type="text/javascript">

function f1(){

//隱藏

$("div").slideUp(3000,function(){

alert('我消失了，你能看到么');

});

}

function f2(){

//顯示

$("div").slideDown(3000,function(){

alert('我又回來了');

});//display:block

}

function f3(){

$("div").slideToggle(1000);

}

$(function(){

//氣缸滑動效果

//setInterval("f3()",1000);

});

</script>

<style type="text/css">

div {width:300px; height:200px; background-color:blue;}

</style>

<body>

<div>duck and dog</div>

<input type="button" value="隱藏" onclick="f1()" />

<input type="button" value="顯示" onclick="f2()" />

<input type="button" value="開關效果" onclick="f3()" />

</body>

3、淡入淡出效果

讓元素通過一定透明度變化，達到顯示和隱藏的效果

fadeIn(speed, [callback])

fadeOut(speed, [callback])

fadeToggle(speed, [callback])開關效果

fadeTo(speed, opacity, [callback]) 把div設置一定透明度(0-1)0.3就是30%透明度

<script type="text/javascript">

function f1(){

//隱藏

$("div").fadeOut(4000);

}

function f2(){

//顯示

$("div").fadeIn(4000);

$("#two").fadeTo(2000,0.3);

}

function f3(){

$("div").fadeToggle(2000);

}

</script>

<style type="text/css">

div {width:300px; height:200px; background-color:blue;}

</style>

<body>

<div id = "two">duck and dog</div>

<input type="button" value="隱藏" onclick="f1()" />

<input type="button" value="顯示" onclick="f2()" />

<input type="button" value="開關效果" onclick="f3()" />

</body>

設置透明度，div的透明度是30%：

4、動畫效果底層方法animate()

show() hide() 等等動畫效果內部都是執行animate()方法

$().animate(css效果參數[，時間][，回調函數]);

css()等一般jquery方法執行完畢之后會返回當前jquery對象，因此jquery的許多方法可以鏈式調用。

<script type="text/javascript">

function f1(){

//文字大小、文字粗體、div本身寬度和高度

//font-size background-color color

console.log($("div"));

//jquery對象調用完畢css方法本身還是一個jquery對象

//說明css方法執行完畢有return this關鍵字

console.log($("div").css('font-weight','bold').css("background-color",'pink'));

var jn = {'font-size':'30px',width:'400px',height:'300px'};

$("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

//$("div").animate(jn,2000);

}

</script>

<style type="text/css">

div {width:300px; height:200px; background-color:blue; }

</style>

<body>

<div>duck and dog</div>

<input type="button" value="設置" onclick="f1()" />

</body>

5、累加累減動畫

如果動畫一次設定left：500 ,第一次單擊div會左移500像素,第二次單擊就不會動了。累加累減就是連續動的，只需要將left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

(function(){

$("#panel").click(function(){

$(this).animate({left: "+=500px"}, 3000);

})

})</span>

6、多重動畫

1、同時執行多個動畫

上面的例子只控制了left屬性的變化，這回我們在控制left屬性的時候同時控制元素高度變為200px

$(function(){

$("#panel").click(function(){

$(this).animate({left: "500px",height:"200px"}, 3000);

})

})

2、順序執行動畫

上面例子中元素右移和放大高度兩個動畫是同時進行的?，F在我們要實現先右移再放大高度，那很簡單，只需要把上面的animate()方法拆開寫成兩個即可

$(function(){

$("#panel").click(function(){

$(this).animate({left: "500px"},3000)

.animate({height:"200px"},1000);

})

})

3、綜合動畫

接下來完成更復雜的動畫。單擊div元素后讓他向右移動的同時增大他的高度，并將它的不透明度從50%切換到100%。然后再讓它從上向下移動，同時它的寬度變大，當完成這

些效果后讓它以淡出的方式隱藏掉。

$(function(){

$("#panel").css("opacity",0.5);//設置不透明度

$("#panel").click(function(){

$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000)

.fadeOut(1000);

})

})

7、動畫回調函數

在上例中，如果想在最后一步切換css樣式而不是隱藏元素。這我們就可以用到animate的第三個參數回調函數了

$(function(){

$("#panel").css("opacity",0.5);//設置不透明度

$("#panel").click(function(){

$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});

})

})

這樣就把css方法加入到動畫隊列中了。

8、停止動畫和判斷是否處于動畫狀態

1、停止元素的動畫

stop([clearQueue][,gotoEnd]) 兩個都是可選參數，都是boolean類型

參數說明：

clearQueue：代表是否清空未執行完的動畫隊列

gotoEnd ：代表是否將正在執行的動畫跳到末狀態

通過一個綜合的示例就可以弄明白stop()方法的這兩個參數了：

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}

.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}

.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}

</style>

<script src="../../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("button:eq(0)").click(function () {

$("#panel")

.animate({height : "150" } , 2000 )

.animate({width : "300" } , 2000 )

.hide(3000)

.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )

.animate({height : "500"} , 2000 );

});

$("button:eq(1)").click(function () {

$("#panel").stop();//停止當前動畫，繼續下一個動畫

});

$("button:eq(2)").click(function () {

$("#panel").stop(true);//清除元素的所有動畫

});

$("button:eq(3)").click(function () {

$("#panel").stop(false,true);//讓當前動畫直接到達末狀態，繼續下一個動畫

});

$("button:eq(4)").click(function () {

$("#panel").stop(true,true);//清除元素的所有動畫，讓當前動畫直接到達末狀態

});

})

</script>

<body>

<button>開始一連串動畫</button>

<button>stop()</button>

<button>stop(true)</button>

<button>stop(false,true)</button>

<button>stop(true,true)</button>

<div id="panel">

<h5 class="head">三國殺殺天下</h5>

<div class="content">

夏侯惇的眼睛，陸遜的聯營，郭嘉司馬深深的基情

</div>

</div>

</body>

</html>