快捷導(dǎo)航

JQuery常用簡單動畫操作方法回顧與總結(jié)

更新時間：2019年12月07日 11:31:54 作者：theVicTory

這篇文章主要介紹了JQuery常用簡單動畫操作方法,回顧與總結(jié)了jQuery常用的各種動畫效果操作方法及相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery常用簡單動畫操作方法。分享給大家供大家參考，具體如下：

jQuery基礎(chǔ)動畫回顧

.hide()	隱藏動畫
.show()	出現(xiàn)動畫
.toggle()	切換顯示狀態(tài)
.slideUp()/Down()	下拉/卷起動畫
.slideToggle()	下拉卷起切換
.fadeIn()/Out()	淡入/出動畫
.fadeToggle()	淡入淡出切換
.fadeTo()	透明度變化到指定透明度，參數(shù)為（duration，opacity）
.animate()	控制css動畫，參數(shù)（properties,option）
.stop()	停止動畫的執(zhí)行

注：

1、可選參數(shù)，動畫持續(xù)時間及結(jié)束后的回調(diào)函數(shù)，持續(xù)時間也可以用“slow”/“fast”代替。例如

$("#t").hide(3000,function (){
  alert(“回調(diào)函數(shù)”);
})
//也可以用JSON格式設(shè)置參數(shù)
$("#t").hide({
  duration: 3000,
  complete: function() {
    alert(“回調(diào)函數(shù)”);
  }
})

2、animate中option屬性的參數(shù)有{duration,easing,step,progress，complete}

duration - 設(shè)置動畫執(zhí)行的時間
easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)，內(nèi)置的有l(wèi)inear線性變化，swing曲線變化，如果需要其他變化方式需要導(dǎo)入庫
step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進(jìn)度的概念
complete：動畫完成回調(diào)

$('#elem').animate({    //在現(xiàn)有高寬上增加100px
 width : "+=100px",
 height : "+=100px"
}, {
 duration: 5000,    //在5秒內(nèi)執(zhí)行完成
 specialEasing: {
  width: 'linear',    //線性過渡效果
  height: 'easeOutBounce'
 },
 complete: function() {
  $(this).after('<div>動畫執(zhí)行完畢!</div>');
 }
});

3、stop()：只會停止第一個動畫，后面的繼續(xù)

stop(true)：停止所有動畫
stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態(tài)

更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋，效果非常棒，小伙伴們做相冊的時候可以直接拿走使用。
2015-03-03
jQuery 動態(tài)云標(biāo)簽插件
這里推薦給大家一款jquery動態(tài)云標(biāo)簽的插件，非常的炫，在指定塊級元素內(nèi)動態(tài)生成a標(biāo)簽，a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控，a標(biāo)簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標(biāo)懸浮停止動畫且透明度最大，層數(shù)最高，鼠標(biāo)離開，恢復(fù)之前狀態(tài)
2014-11-11
JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容
本文詳細(xì)講解了JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-04-04
jQuery 白癡級入門教程
本文寫給那些完全不懂JS，只會一些HTML和CSS的同學(xué)！本站就是范例
2009-11-11
10個基于Jquery的幻燈片插件教程
當(dāng)有大量的內(nèi)容或者圖片需要在你的網(wǎng)站或者BLOG上展示的時候，以幻燈片滑動的方式是一個不錯的選擇，這種效果常用于公司網(wǎng)站或者個人BLOG。
2010-10-10
jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼，有需要的朋友可以參考一下
2013-08-08
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對文件的上傳的方法和實(shí)例，非常的實(shí)用，有需要的小伙伴可以參考下。
2015-06-06
jQuery中用dom操作替代正則表達(dá)式
這篇文章主要介紹了jQuery中用dom操作替代正則表達(dá)式的方法,需要的朋友可以參考下
2014-12-12
jQuery復(fù)制表單元素附源碼分享效果演示
當(dāng)我們遇到提交表單時，需要我們重復(fù)添加好幾個表單，在訂單表格中添加多個不同型號的產(chǎn)品信息。這個時候有復(fù)制表單表單按鈕，也就是新增一項(xiàng)，通過點(diǎn)擊復(fù)制按鈕來實(shí)現(xiàn)新增一項(xiàng)，怎么實(shí)現(xiàn)的呢？下面小編跟大家分享，需要的朋友的朋友可以參考下
2015-09-09
jquery隱藏標(biāo)簽和顯示標(biāo)簽的實(shí)例
在jquery中我們要實(shí)現(xiàn)點(diǎn)擊按鈕隱藏標(biāo)簽和顯示標(biāo)簽，只要綁定指定button或其它，這樣點(diǎn)擊時調(diào)用hide或show函數(shù)即可解決，下面看個實(shí)例就明白了
2013-11-11