2. 程式人生 > 實用技巧 >jQuery8：動畫效果

jQuery8：動畫效果

阿新 • • 發佈：2020-11-13

8，基本動畫效果

注意：這些方法可能不會提示，需要自己新增

1）基本

show(speed，fn) ：顯示

hide(speed，fn) ：隱藏

注意：speed：slow|normal|fast |時間單位毫秒

Fn:回撥函式，當動畫執行完成之後，自動呼叫該函式，也可以省略。

2）滑動：

slideDown(speed，fn)：顯示

slideUp(speed，fn)：隱藏

3）淡入淡出：通過改變標籤的不透明度來實現

fadeIn(speed，fn)：顯示

fadeOut(speed，fn)：隱藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(
 
function(){
                $("#btn1").click(function(){   /* 基本動畫效果，慢慢滑動收縮+慢慢變淡*/
                    $("img").show(3000,);
                });
                $("#btn2").click(function(){
                    $("img").hide(3000);
                });
                $("#btn3").click(function(){  /* 滑動效果，不會慢慢變淡
 
*/
                    $("img").slideDown(5000);
                });
                $("#btn4").click(function(){
                    $("img").slideUp(5000);
                });
                $("#btn5").click(function(){  /* 淡入淡出效果，不會滑動，只通過改變標籤的透明度來改變*/
                    $("img").fadeIn(5000);
                });
                $(
 
"#btn6").click(function(){
                    $("img").fadeOut(5000);
                });
            });
        </script>
    </head>
    <body>
        <div id="div1">
            <img id="img1" src="img/1.jpg">
        </div>
        <input type="button" name="btn1" id="btn1" value="基本顯示" />
        <input type="button" name="btn2" id="btn2" value="基本隱藏" />
        <input type="button" name="btn3" id="btn3" value="滑動顯示" />
        <input type="button" name="btn4" id="btn4" value="滑動隱藏" />
        <input type="button" name="btn5" id="btn5" value="淡入淡出顯示" />
        <input type="button" name="btn6" id="btn6" value="淡入淡出隱藏" />
        </body>
</html>

相關推薦

jQuery8：動畫效果

8，基本動畫效果 注意：這些方法可能不會提示，需要自己新增 1）基本 show(speed，fn) ：顯示

CSS動畫例項：Loading載入動畫效果（二）

2．條狀型Loading 這類Loading動畫的基本思想是：在呈現容器中定義一個或多個子層，再對每個子層進行樣式定義，使得其顯示為一個條形或方形，最後編寫關鍵幀動畫控制，使得各個條形（或方形）的大小、位置、填充色等

WPF特效：流光動畫效果

WPF特效——流光動畫效果 一、程式碼 <Window.Resources> <!--外--> <Storyboard x:Key=\"Storyboard1\" RepeatBehavior=\"Forever\">

華為 MatePad Pro 12.6 英寸版推送鴻蒙 HarmonyOS 2.0.0.170 更新：優化應用啟動時的圓角動畫效果、調整強制重啟方式等

9 月 3 日訊息感謝網友的熱心線索投遞，華為 MatePad Pro 12.6 英寸版已推送鴻蒙 HarmonyOS 2.0.0.170 系統更新，版本號為 C00E160R1P17，大小為 604MB。

JQuery屬性，動畫效果，：hidden和：visible

一.jQuery屬性： 1、attr()：設定或返回被選元素的屬性值。(引數個數表示：1獲取屬性值，2是設定)

數字動畫效果：countup.js和vue-countupjs的使用

一、countup.js 1、下載 　　npm [email protected]　　（最新版本的有問題） 2、DOM <div class=\"num-wrapper\">

使用YYLabel+CADisplayLink實現文字首行縮排的動畫效果

公司有個需求，點選關注，標題處要有個已關注的圖示提示，標題文字要根據是否已關注作出位置調整。

Android 開機充電圖示和充電動畫效果

首先驅動需要先獲取到2個power supply kernel\\msm-3.18\\drivers\\usb\\phy\\phy-msm-usb.c motg->usb_psy.name = \"usb\";

JS實現網頁煙花動畫效果

原生js實現放煙花效果，點選滑鼠，然後向四周擴散，最後自由落體效果！最簡單的方法實現！

Android自定義帶動畫效果的圓形ProgressBar

本文例項為大家分享了Android自定義帶動畫效果的圓形ProgressBar，供大家參考，具體內容如下

jQuery 動畫與停止動畫效果例項詳解

本文例項講述了jQuery 動畫與停止動畫效果。分享給大家供大家參考，具體如下：

利用Flutter實現“孔雀開屏”的動畫效果

前言 今天分享一個類似“孔雀開屏”的動畫效果，開啟新的頁面時，新的頁面從螢幕右上角以圓形逐漸開啟到全屏。

pygame用blit()實現動畫效果的示例程式碼

pygame的的實現動畫的方法有很多，但是都是圍繞著表面進行的，也就是說實現動畫的方式不同，但是本質其實都是對錶面的不同處理方式而已。

win10系統關閉動畫效果的小技巧

電腦升級win10正式版系統後發現有動畫效果，切換程式就會呈現出漸變效果。對於電腦配置不夠高的小夥伴來說，開啟動畫效果會造成系統卡頓。如果想要流暢使用Win10系統，必須關閉動畫效果。那麼該怎麼操作？有需要的一

如何用WindowsForm給視窗新增一些簡單的動畫效果

在顯示或者隱藏視窗的時候，可以利用Windows API中的AnimateWindow函式實現一些特殊的效果。主要的動畫型別有四種:滾動、幻燈片、摺疊或展開和alpha混合漸變。

flutter-路由跳轉動畫效果（漸隱漸現，縮放效果，旋轉縮放）

1.漸隱漸現過渡效果 自定義CustomRoute Widget 新建一個custom_router.dart檔案，這個就是要自定義的路由方法，自定義首先要繼承於通用的路由的構造器類PageRouterBuilder。繼承之後重寫父類的CustomRoute構造方法。

Vue實現Tab標籤路由效果並用Animate.css做轉場動畫效果的程式碼第1/3頁

類似於瀏覽器視窗一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高階的玩意兒，奈何複雜的東西總是由簡單的東西拼接而成的，這個功能也不例外。

JavaScript-Tool-lhgDialog：動畫示例

ylbtech-JavaScript-Tool-lhgDialog：動畫示例 1.返回頂部 1、 ajax擴充套件示例 注：本頁面中的示例使有的動畫和ajax部分方法都使用jQuery庫中相關的方法，所以使用本頁面中的示例必須載入jQuery庫，

Jquery如何使用動畫效果改變背景色

Jquery如何使用動畫效果改變背景色 一、問題引入 jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態改變數值型的引數，例如：top，left，width

Jquery如何使用animation動畫效果改變背景色

Jquery如何使用animation動畫效果改變背景色 一、問題引入 jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態改變數值型的引數，例如：top，le