jQuery簡單動畫與特效
阿新 • • 發佈：2021-01-06
1.顯示與隱藏動畫
1.1show()與hide()方法,前者為顯示,後者為隱藏
show()方法和hide()方法都能動態的改變當前元素的高、寬、不透明度
語法:
①jQuery物件.show(duration,[fn])。
②jQuery象.hide(duration，[fn]）
duration為動畫執行時間,[fn]為function，在動畫完成時執行的函式
案例:($("div").show("slow")或者$("div").show(600)")
1.2toggle()方法
能動態地改變當前元素高度、寬度、不透明度
語法：jQuery物件.toggle(duration,[fn]);
相似:**toggleClass()**有這個樣式就移除,沒有就新增
**fadeToggle()**淡入淡出的隱藏與顯示切換
**slideToggle()**滑入滑出的隱藏與顯示
2.fadeIn()與fadeOut()淡入淡出動畫效果
主要通過改變透明度實現淡入淡出,透明度從0到1或1到0
如果需要將透明度調到指定值需要用fadeTo()方法
語法:jQuery物件.fadeIn(duration,[fn]); jQuery物件.fadeOut(duration,[fn]) jQuery物件.fadeTo(duration,opacity,[fn])
duration與[fn]與之前所講意思一致,opacity指定透明度值
3.slideDown()與slideUp()滑入滑出動畫效果
動態地改變語速高度使其達到滑入滑出
slideDown()由上到下滑入 slideUp與之相反
語法:jQuery物件.slideDown(duration,[fn])
jQuery物件.slideUp(duration,[fn])
4.自定義動畫
4.1animate簡單動畫
動態的改變當前元素的各種css樣式,可改變:高寬、邊框、邊距、定位、字型、背景、透明度等
語法:jQuery物件.animate(properties,[duration],[fn]); 例:$("div").animate({width:"180px",height:"60px"},600)
properties形式值設定css屬性
4.2移動位置的動畫
改變元素在頁面中的動畫,首先要將元素position屬性設定為"relative"或"absolute"否則無法移動
"+=“或”-="表示在原來的元素上累加或累減
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
position:absolute;
top:0px;
left:0px;
}
</style>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
//+=,-=累加累減 $(this).animate({left:"+=100px",top:"100px",opcity:0.5},1000);
});
});
</script>
</head>
<body>
<img src="img/frozen.jpg"/>//隨便加一張自己的圖片試一試
</body>
</html>
4.3佇列動畫與動畫停止stop()
佇列動畫:當有多個動畫時,按順序執行
stop()方法結束當前動畫
語法:jQuery物件.stop([clearQueue],[gotoEnd]);
兩個引數均為布林型別(true false)
clearQueue表示清空未執行的動畫佇列
gotoEnd是否立即完成正在執行的動畫
以上為一些入門的jQuery動畫,不對請批評指正.需要案例留言即可,建議自己可以多加探索,熟練掌握