(1)show 語法:
$(selector).show(speed,callback)顯示元素參數:
speed:可選參數,表示速度,可能的值包括:毫秒,"slow","normal","fast"。callback:可選參數,show 函數執行完之后,要執行的函數。(2)hide
隱藏元素,用法和show一樣(3)toggle 語法:
$(selector).toggle(speed,callback,switch)參數:
前兩個參數和show一樣switch:可選,布爾值。規定toggle是否隱藏或顯示所有被選元素,True - 顯示所有元素,False - 隱藏所有元素,如果設置此參數,則無法使用 speed 和 callback 參數。(1)滑動
slideDown:用于向下滑動元素slideUp:用于向上滑動元素。slideToggle:可以在 slideDown() 與 slideUp() 方法之間進行切換例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery/jquery-3.1.1.js"></script></head><body><script> $(document).ready(function () { $(".flip").on("click", function () { $(".panel").slideToggle(); }); });</script><style type="text/CSS"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; width: 300px; } div.panel { height:120px; }</style><div class="panel"> <p>hello world</p></div><p class="flip">點擊這里</p></body></html>(2)淡入淡出
fadeIn:淡入已隱藏的元素fadeOut:淡出可見元素fadeToggle:可以在 fadeIn() 與 fadeOut() 方法之間進行切換fadeTo:方法允許漸變為給定的不透明度注意:$(selector).fadeTo(speed,opacity,callback),fadeTo語法不太一樣,opecity代表指定的不透明度。
(1)animate 語法一:
$(selector).animate(styles,speed,easing,callback)styles:規定產生動畫效果的 CSS 樣式和值。easing:可選。規定在不同的動畫點中設置動畫速度的 easing 函數。內置的 easing 函數:swing,linear。擴展插件中提供更多 easing 函數。語法二:
$(selector).animate(styles,options)options:可選。規定動畫的額外選項??赡艿闹担簊peed - 設置動畫的速度easing - 規定要使用的 easing 函數callback - 規定動畫完成之后要執行的函數step - 規定動畫的每一步完成之后要執行的函數queue - 布爾值。指示是否在效果隊列中放置動畫。如果為 false,則動畫將立即開始specialEasing - 來自 styles 參數的一個或多個 CSS 屬性的映射,以及它們的對應 easing 函數(2)stop
$(selector).stop(stopAll,goToEnd)停止當前正在運行的動畫。stopAll:可選。規定是否停止被選元素的所有加入隊列的動畫。goToEnd:可選。規定是否允許完成當前的動畫。該參數只能在設置了 stopAll 參數時使用。有些用法我也不是很明白,就等項目中用到再具體研究吧
新聞熱點
疑難解答