jquery第十七課,jquery特效處理2,對象的淡入淡出,還有就是自定義動畫效果.這個自定義就得靠自己的腦子編特效了.
參考共用代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery特效處理</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="javascript">
$(function(){
<!--www.forasp.cn jquery代碼區-->
});
</SCRIPT>
<BODY>
<div id="www" style="display:none;">網站制作學習網>
<div id="foraspcn" style="background-color: #f00;height=100;width:300;">jquery特效處理</div>
</BODY>
</HTML>
3.淡入淡出效果.
(1).fadeIn(speed,[callback]);通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數.speed跟上一節一樣有常規的"slow"0.6s,"normal"0.4s和"fast"0.2s.(下面的都一樣),元素的其他屬性不變.
jQuery實例:$("#www").fadeIn("slow");試試看,這樣"網站制作學習網",由不顯示(透明)逐漸變成顯示(不透明)(0.6s).
$("#www").fadeIn("slow",function(){alert("網站制作學習網顯示完畢")});當顯示完成后,彈出"網站制作學習網顯示完畢"對話框
(2).fadeOut(speed,[callback]);通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數,參數同上.
jQuery實例:$("#foraspcn").fadeOut(5000,function(){alert("特效fadeOut執行完畢")}); 效果5秒,jquery特效處理層從顯示(不透明)到不顯示(透明).完畢后彈出對話框.
(3).fadeTo(speed,opacity,[callback]);把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在動畫完成后可選地觸發一個回調函數。參數同上.opacity表示透明度從0-1;0表示透明(不顯示),1表示不透明(顯示).比如0.5也就是透明度50%.
jQuery實例:$("#foraspcn").fadeTo("slow",0.5,function(){alert("變成半透明了把!")});
4.創建自定義動畫
(1).animate(params, [duration], [easing], [callback]);用于創建自定義動畫的函數<網站制作學習網Foasp.cn>
參數介紹:
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 比如{height:"100px",width:"200px"}
duration:也就是上面的speed,三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)可選
easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".可選
callback:回調函數.可選.
在這里就舉例一個,對于easing 是需要插件支持的.目前沒有實用就不做easing例子了.
例子:
$("#foraspc").animate(
{height:"50px",width:"100px",opacity:"0.8"},
1000,
function(){alert("執行完畢")}
);
試試看效果.
(2).stop([clearQueue], [gotoEnd])停止所有在指定元素上正在運行的動畫
$("#foraspcn").bind("click",function(){$("#www").stop();}); 當點擊第二個div時,第一個層停止動作
(3).delay(duration, [queueName]);設置一個延時來推遲執行隊列中之后的項目duration延時時間，單位：毫秒queueName隊列名詞，默認是Fx，動畫隊列。
舉例:$("#foraspcn").slideUp(300).delay(800).fadeIn(400); 看看效果把.
5.jquery動畫設置
BooleanjQuery.fx.off關閉頁面上所有的動畫
jquery簡單的特效就講完了.
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
