快捷導(dǎo)航

jQuery使用animate創(chuàng)建動畫用法實例

更新時間：2015年08月07日 11:36:30 作者：皮蛋

這篇文章主要介紹了jQuery使用animate創(chuàng)建動畫用法,可實現(xiàn)點擊鏈接文字隱藏及顯示文字的功能,實例分析了jquery中toggle與animate方法的使用技巧,需要的朋友可以參考下

本文實例講述了jQuery使用animate創(chuàng)建動畫用法。分享給大家供大家參考。具體如下：

animate的用法：

animate( Hash params, String|NumberJavascript 字符串或數(shù)字值 speed, String easing , Function callback(可選) 在動畫完成時執(zhí)行的函數(shù) )用于創(chuàng)建自定義動畫的函數(shù)。

實例運行效果截圖如下：

具體代碼如下：

<!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>animate</title> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("a").toggle(function(){
   $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  },function(){
   $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
  });
});
</script> 
</head> 
<body> 
<a href="#">text</a> 
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或數(shù)字值 speed, String easing , Function callback(可選) 在動畫完成時執(zhí)行的函數(shù) )
用于創(chuàng)建自定義動畫的函數(shù)。</div>
</body> 
</html>

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

您可能感興趣的文章:

相關(guān)文章

基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)硪黄贒OM節(jié)點刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery實現(xiàn)圖片信息的浮動顯示實例代碼
圖片信息的浮動顯示的效果，在網(wǎng)頁應(yīng)用中還是比較流行的，下面為大家詳細介紹下使用jquery是如何實現(xiàn)的，喜歡的朋友可以參考下
2013-08-08
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁面扁平化的普及，越來越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。
2014-11-11
jQuery 打造動態(tài)漸變按鈕詳細圖文教程
這是寫給web設(shè)計者和前端開發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動態(tài)漸變效果。
2010-04-04
jQuery常見面試題之DOM操作詳析
關(guān)于jQuery的DOM操作面試問題其實有很多，下面這篇文章主要給大家介紹了jQuery常見面試題之DOM操作的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習價值，需要的朋友們下面來一起看看吧。
2017-07-07
jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
關(guān)于jQuery中的end()使用方法
最近在學(xué)習jQuery方面的知識，學(xué)習中遇到一定的困難，一些知識不得不查看官方的文檔，在用到end()方法時，被一個小例子搞得有點暈。
2011-07-07
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會對這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。
2017-08-08
jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery列表動態(tài)增加和刪除的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于jQuery列表動態(tài)增加和刪除的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2020-11-11