jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果示例
更新時(shí)間：2018年09月06日 09:45:59 作者：shuair
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(xiàn)、漸出、漸入效果,結(jié)合實(shí)例形式分析了jQuery中animate()、hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()等方法簡(jiǎn)單使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)畫(huà)、消失、顯現(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) ; //滑動(dòng)消失
}) ;
$(but4).on("click",function(){
$("img").slideDown(5000) ; //滑動(dòng)顯現(xiàn)
}) ;
$(but5).on("click",function(){
$("img").slideToggle(5000) ; //滑動(dòng)切換（消失后顯現(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) ; //移動(dòng)（需要調(diào)整對(duì)象的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="滑動(dòng)消失"/>
<input type="button" id="but4" value="滑動(dòng)顯現(xiàn)"/>
<input type="button" id="but5" value="滑動(dòng)切換"/>
<input type="button" id="but6" value="淡出"/>
<input type="button" id="but7" value="淡入"/>
<input type="button" id="but8" value="淡化"/>
<input type="button" id="but9" value="移動(dòng)"/>
<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>
運(yùn)行效果（這里使用了本站演示圖片加以測(cè)試）：
這里的方法都可以再嵌套方法。
對(duì)象.方法名(延遲時(shí)間,function(){新的方法});
比如，消失后顯現(xiàn)
$(but1).on("click",function(){
$("img").hide(500,function(){
$("img").show(5000) ;
}) ;
}) ;
比如，移動(dòng)后再移回
$(but9).on("click",function(){
$("div").animate({left:"800px"},5000,function(){
$("div").animate({left:"0px"},5000) ;
}) ;
}) ;
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)數(shù)字自動(dòng)增加或者減少的動(dòng)畫(huà)效果示例
- jQuery實(shí)現(xiàn)碰到邊緣反彈的動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫(huà)效果示例
- jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫(huà)效果示例
- jQuery實(shí)現(xiàn)的下雪動(dòng)畫(huà)效果示例【附源碼下載】
- jQuery+HTML5實(shí)現(xiàn)WebGL高性能煙花綻放動(dòng)畫(huà)效果【附demo源碼下載】
- JQuery動(dòng)畫(huà)和停止動(dòng)畫(huà)實(shí)例代碼
- 基于Jquery的溫度計(jì)動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)的模仿雨滴下落動(dòng)畫(huà)效果
相關(guān)文章
用jquery的大概有一年了，只知道$(selector)，其內(nèi)部選擇器是如何實(shí)現(xiàn)并不完全不清晰，汗顏啊于是看了jquery的源碼,jquery用的選擇器的引擎是sizzle,感興趣的朋友可以了解下，或許本文對(duì)你有所幫助2013-02-02
jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
本文主要分享了jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件的代碼，代碼簡(jiǎn)單易懂，需要的朋友一起來(lái)看下吧2016-12-12
在本篇文章里小編給大家整理了關(guān)于jquery如何將信息遍歷到界面上的實(shí)例代碼內(nèi)容，需要的朋友們可以參考下。2020-01-01
使用JQuery自動(dòng)完成插件Auto Complete詳解
這篇文章主要介紹了使用JQuery自動(dòng)完成插件Auto Complete詳解,使用JQuery自動(dòng)完成插件，更新現(xiàn)有圖書(shū)列表頁(yè)面上的搜索，當(dāng)用戶鍵入的時(shí)候立即顯示結(jié)果。,需要的朋友可以參考下2019-06-06
jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法,實(shí)例分析了jquery實(shí)現(xiàn)圖片放大效果的方法,涉及jquery操作鼠標(biāo)事件及頁(yè)面元素屬性修改的相關(guān)技巧,需要的朋友可以參考下2015-07-07
這是一個(gè)支付頁(yè)面DEMO，有截圖，非常逼真，感興趣的朋友可以參考下2014-07-07
我們用一個(gè)語(yǔ)句就讓下面五個(gè)div顯示成功，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery驗(yàn)證插件validate的使用方法，jQuery.validate.js插件用于對(duì)表單輸入進(jìn)行驗(yàn)證，對(duì)驗(yàn)證插件感興趣的小伙伴們可以參考一下2016-05-05
Tooltip（提示框）是一種常見(jiàn)的效果，它通常用在需要進(jìn)一步解釋、說(shuō)明或提示的某個(gè)詞上。這種小效果實(shí)現(xiàn)起來(lái)雖然不難，但如果你想不勞而獲，可以試試 Tips。2015-07-07