jQuery實現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果示例
更新時間：2018年09月06日 09:45:59 作者：shuair
這篇文章主要介紹了jQuery實現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡單使用技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)動畫、消失、顯現(xiàn)、漸出、漸入效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title></title>
<script>
$(function(){
$(but1).on("click",function(){
$("img").hide(500) ; //消失
}) ;
$(but2).on("click",function(){
$("img").show(5000) ; //顯現(xiàn)
}) ;
$(but3).on("click",function(){
$("img").slideUp(5000) ; //滑動消失
}) ;
$(but4).on("click",function(){
$("img").slideDown(5000) ; //滑動顯現(xiàn)
}) ;
$(but5).on("click",function(){
$("img").slideToggle(5000) ; //滑動切換（消失后顯現(xiàn)，顯現(xiàn)后消失）
}) ;
$(but6).on("click",function(){
$("img").fadeOut(5000) ; //淡出
}) ;
$(but7).on("click",function(){
$("img").fadeIn(5000) ; //淡入
}) ;
$(but8).on("click",function(){
$("img").fadeTo(500,0.5) ; //淡化
}) ;
$(but9).on("click",function(){
$("div").animate({left:"800px"},5000) ; //移動（需要調(diào)整對象的style屬性中position的值absolute）
}) ;
}) ;
</script>
</head>
<body>
<input type="button" id="but1" value="消失"/>
<input type="button" id="but2" value="顯現(xiàn)"/>
<input type="button" id="but3" value="滑動消失"/>
<input type="button" id="but4" value="滑動顯現(xiàn)"/>
<input type="button" id="but5" value="滑動切換"/>
<input type="button" id="but6" value="淡出"/>
<input type="button" id="but7" value="淡入"/>
<input type="button" id="but8" value="淡化"/>
<input type="button" id="but9" value="移動"/>
<div style="position: absolute;"><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="200"></div>
</body>
</html>
運行效果（這里使用了本站演示圖片加以測試）：
這里的方法都可以再嵌套方法。
對象.方法名(延遲時間,function(){新的方法});
比如，消失后顯現(xiàn)
$(but1).on("click",function(){
$("img").hide(500,function(){
$("img").show(5000) ;
}) ;
}) ;
比如，移動后再移回
$(but9).on("click",function(){
$("div").animate({left:"800px"},5000,function(){
$("div").animate({left:"0px"},5000) ;
}) ;
}) ;
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery通過擴展實現(xiàn)抖動效果的方法,涉及jQuery擴展的技巧及抖動特效的實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
在jQuery 1.5中使用deferred對象的代碼(翻譯)
Deferred是jQuery1.5新增的一個特性，很多人把它翻譯成 “異步隊列”，我覺得比較靠譜，畢竟和“延遲”沒啥關(guān)系，不過這篇文章中我還采用deferred這個單詞。2011-03-03
本文給大家分享一款簡單但實用的多級垂直手風(fēng)琴下拉菜單列表，完全使用css來制作多級手風(fēng)琴菜單，通過該代碼將不同的子菜單進行分組制作出多級菜單的效果，本文附效果演示和源碼下載感興趣的朋友一起學(xué)習(xí)吧2015-11-11
對一個文件域(input type=file)使用了驗證后，我們總會希望把文件域中的值給清空了，在IE中，由于安全設(shè)置的原因，是不允許更改文件域的值的，接下來為大家介紹一下解決方法2013-04-04
JQuery EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實例
下面小編就為大家?guī)硪黄狫Query EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jquery attr()設(shè)置和獲取屬性值實例教程
在JS中設(shè)置節(jié)點的屬性與屬性值用到setAttribute(),獲得節(jié)點的屬性與屬性值用到getAttribute(),而在jquery中，只需要用到attr()這個函數(shù)就可以了。attr是attribute（屬性）的縮寫。2016-09-09
由于前端javascript對跨域訪問做了安全限制，所以javascript只能訪問與包含它的文檔在同一域名下的內(nèi)容，接下來，小編通過此篇文章給大家介紹iframe跨域通信的封裝，需要的朋友可以參考下2015-08-08
jquery+css實現(xiàn)的紅色線條橫向二級菜單效果
這篇文章主要介紹了jquery+css實現(xiàn)的紅色線條橫向二級菜單效果,界面美觀大方,簡潔實用,通過jquery遍歷及切換頁面元素實現(xiàn)這一功能,需要的朋友可以參考下2015-08-08
今天小朋友寫了個程式，出現(xiàn)亂碼，將解決過程分享一下 為方便說明，將環(huán)境簡化，vs.net 2003, jquery-1.3.2.js, web service調(diào)用2010-02-02
jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法
cookie，localStorage和sessionStorage都是瀏覽器本地存儲數(shù)據(jù)的地方,其用法不盡相同，今天小編通過本文給大家分享jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法，需要的朋友參考下吧2017-10-10