jQuery動畫顯示與隱藏效果實例示範(附demo原始碼下載)_jquery
本文實例講述了jQuery動畫顯示和隱藏效果。分享給大家參考，具體如下：
運作效果截圖如下：
點擊此處查看線上示範。
完整實例程式碼點擊此處本站下載。
具體程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery 动画显示和隐藏效果</title>
<script>
/*
1.$("页面元素类型").show(时间, 回调函数);以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数;指定时间后依次执行回调函数，页面上能找到几个，就连着执行几次。时间可以为毫秒数，也可以是slow,nomal,fast
2.$("页面元素").toggle();切换此元素的显示状态。如果它是显示的，让它隐藏，如果它是隐藏的，让它显示。
3.$("页面元素").slideDown(时间,回调函数)通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
4.$("页面元素").fadeIn(时间,回调函数)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
*/
</script>
<script language="javascript" src="jquery1.3.2.js" ></script>
<script>
function test_show() {
//$("#myImage").show(2000,function(){alert("演示完毕！");});
$("img").show(2000,function(){alert("演示完毕！");});
}
function test_hide() {
//$("#myImage").hide(2000,function(){alert("演示完毕！");});
$("img").hide(2000,function(){alert("演示完毕！");});
}
function test_slideDown() {
$("#myImage2").slideDown(500,function(){alert("滑动向下放大完毕");});
}
function test_slideUp() {
$("#myImage2").slideUp(2000,function(){alert("滑动向上缩小完毕");});
}
function test_slideToggle() {
$("#myImage2").slideToggle(1000,function(){alert("切换滑动效果完毕");});
}
function test_fadeIn() {
$("#myImage3").fadeIn(2000,function(){alert("淡入完毕");});
}
function test_fadeOut() {
$("#myImage3").fadeOut(2000,function(){alert("淡出完毕");});
}
function test_fadeTo() {
$("#myImage3").fadeTo(2000,0.25,function(){alert("调整到指定透明度完毕");});
}
</script>
</head>
<body>
<div>
<input type="button" value="显示" onClick="$('p').show();" />
<input type="button" value="隐藏" onClick="$('p').hide();" />
|||
<input type="button" value="延时显示" onClick="test_show()" />
<input type="button" value="延时隐藏" onClick="test_hide()" />
<input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" />
|||
<input type="button" value="滑动向下放大" onClick="test_slideDown()" />
<input type="button" value="滑动向上缩小" onClick="test_slideUp()" />
<input type="button" value="切换滑动效果" onClick="test_slideToggle()" />
|||
<input type="button" value="淡入" onClick="test_fadeIn()" />
<input type="button" value="淡出" onClick="test_fadeOut()" />
<input type="button" value="调整到指定透明度" onClick="test_fadeTo()" />
</div>
<p style="display:none">Hello World!</p>
<p style="display:none">Hello World!</p>
<p style="display:none">Hello World!</p>
<p style="display:none">Hello World!</p>
<img id="myImage" src="images/11.jpg" style="display:none" />
<img id="myImage1" src="images/1.jpg" style="display:none" />
<img id="myImage2" src="images/2.jpg" style="display:none" />
<img id="myImage3" src="images/3.jpg" style="display:none" />
</body>
</html>
希望本文所述對大家jQuery程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
不封鎖不刪除怎麼隱藏微信好友？不封鎖不刪除隱藏微信好友的方法
Mar 13, 2024 pm 07:19 PM
不黑不刪除怎麼隱藏微信好友？不少的用戶們想隱藏一些好友不知道要怎麼去操作，下面就讓本站來為用戶們來仔細的介紹一下不拉黑不刪除隱藏微信好友的方法吧。 不拉黑不刪除隱藏微信好友的方法 方法一： 1、先開啟微信軟體，在微信頁面找到通訊錄，點選」我的「。 2、然後我們進入到設定頁面。 3、找到」隱私「選項，點選進去。 4、接著點擊」不讓他看「。 5、進入到不讓她看頁面，點選」+「勾選需要隱藏的好友
抖音短影片怎麼隱藏作品 隱藏個人影片作品的方法
Mar 12, 2024 pm 12:49 PM
抖音短視頻app軟體內提供的短視頻作品非常多，隨心所欲想看就看，而且都是永久免費提供的，不同類型的視頻直播頻道都是開放的，所有的視頻內容都是原創的，帶給大家最滿意的觀看方式。輸入帳號線上登錄，各種精彩萬分的短視訊推送，都是根據大家日常看的，精準推薦，還能進入直播間與主播互動聊天，讓你的心情更加愉悅。個人上傳的作品也能隱藏起來，非常簡單一鍵設置，刷到哪裡看到哪，上下滑動無數網友的實時評論搶先看，還能分享日常的生活動態，現在小編在線詳細為抖音短視頻用戶推送隱藏個人影片作品的方法。首先打開抖音短
小米14如何隱藏靈動島？
Mar 18, 2024 pm 03:40 PM
除了令人驚嘆的硬體配置和出色的功能，小米14還隱藏著一個讓人著迷的地方—靈動島。在這裡，用戶可以盡情享受個人化客製化以及創意無限的手機體驗。不過不是所有人都喜歡這個功能的，那麼，小米14如何隱藏靈動島呢？讓我們一起了解一下。小米14如何隱藏靈動島？ 1.開啟小米14手機的設定應用程式。 2.捲動找到「特色功能」選項並點選進入。 3.在特色功能頁面中找到「隱藏靈動島」選項並開啟它。 4.確認開啟隱藏靈動島後，返回桌面即可看到靈動島已被隱藏。
抖音隱藏作品的詳細教學
Mar 25, 2024 pm 03:11 PM
1.先點選【+】進行拍攝。 2、然後點選右下角的勾確認完成拍攝。點選】下一步【，3、點選【誰可以看】。選擇【私密】即可，情境二：已拍作品，1、點選【我】，選擇【作品】。 2.點選右旁【三點】標識。 3.向左滑動，找到【權限設定】，4、點擊】設為私密】即可。
ppt動畫如何設定先進入再退出
Mar 20, 2024 am 09:30 AM
我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【
深度清理手機隱藏垃圾的方法（徹底清除手機記憶體垃圾）
Jun 01, 2024 am 09:29 AM
手機已經成為我們日常生活中不可或缺的一部分，隨著科技的不斷進步和智慧型手機的普及。這些垃圾檔案佔用了寶貴的儲存空間，隨著時間的推移、手機中會累積大量的隱藏垃圾，並且會導致手機效能下降，然而。了解如何深入清理手機隱藏垃圾成為每個手機用戶必備的知識。一、尋找並清除無用的應用程式快取二、刪除不再使用的應用程式三、清理照片和影片快取四、徹底清理臨時檔案和下載資料夾五、整理和清理聯絡人和簡訊記錄六、清理系統緩存七、卸載無用的系統應用程式八、清理瀏覽器快取和歷史記錄九、刪除無效的音樂和音訊檔案十、優化手機檔案系統
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
