jQuery動(dòng)畫特效實(shí)例教程
本文以實(shí)例形式詳細(xì)講述了jQuery動(dòng)畫特效的實(shí)現(xiàn)方法。分享給大家供大家參考之用。具體方法如下:
1.自制折疊內(nèi)容塊
內(nèi)容塊如下:
<div class="module"> <div class="caption"> <span>標(biāo)題</span> <img src="rollup.gif" alt="rollup" title="rolls up this module"/> </div> <div class="body"> 近日,《體壇周報(bào)》記者馬德興在接受天津體育頻道《體壇新視野》節(jié)目采訪時(shí)表示自己對恒大[微博]的情況比較擔(dān)憂,恒大統(tǒng)治力比上賽季下降了很多,恒大外援存在位置重疊的問題,客場不輸給西悉尼流浪者就是一個(gè)可以接受的結(jié)果。該節(jié)目稱恒大聯(lián)賽3連勝勝之不武,恒大的惹不起不過爾爾,恒大失去了對其它球隊(duì)壓倒性的優(yōu)勢,能力下降是恒大霸主地位有所動(dòng)搖的根源所在。 </div> </div>
給img元素綁定點(diǎn)擊事件。
$(function() { $('div.caption img').click(function () { //先找到img的父級元素,再找該父級元素的子元素 var $body = $(this).closest('div.module').find('div.body'); if ($body.is(':hidden')) { $body.show(); } else { $body.hide(); } }); });
運(yùn)行效果如下圖所示:
切換元素的顯示狀態(tài),還可以用toggle方法。
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle(); }); });
以上是沒有動(dòng)畫效果的,有時(shí)候感覺會(huì)很唐突。實(shí)際上,show,hide,toggle方法都可以有動(dòng)畫效果。比如:
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle('slow'); }); });
又比如:
$(function() { $('div.caption img').click(function () { $(this).closest('div.module').find('div.body').toggle('slow', function() { $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden')) }); }); });
2.使元素淡入淡出
fadeIn(speed, callback) fadeOut(speed, callback) fadeTo(speed, opacity, callback)
3.上下滑動(dòng)元素
slideDown(speed, callback) slideUp(speed, callback) slideToggle(speed, callback)
4.停止動(dòng)畫
stop(clearQueue, gotoEnd)
5.創(chuàng)建自定義動(dòng)畫
animate(properties, duration, easing, callback) $('.classname').animate({opacity:'toggle'},'slow')
如果寫一個(gè)擴(kuò)展函數(shù)。
$.fn.fadeToggle = function(speed){ return this.animate({opacity:'toggle'},'slow'); }
6.自定義縮放動(dòng)畫
$('.classname').each(function(){ $(this).animate({ width: $(this).width() * 2, height: $(this).height() * 2 }); });
7.自定義掉落動(dòng)畫
$('.classname').each(function(){ $(this) .css("position","relative") .animate({ opacity: 0, top: $(window).height() - $(this).height() - $(this).position().top },'slow',function(){ $(this).hide(); }) });
8.自定義消散動(dòng)畫
$('.classname').each(function(){ var position = $(this).position(); $(this) .css({ position: 'absolute', top: position.top, left:position.left }) .animate({ opacity: 'hide', width: $(this).width()*5, height: $(this).height()*5 top: position.top - ($(this).height() * 5 / 2), left: position.left - ($(this).width() * 5 /2) },'normal'); });
9.隊(duì)列中的動(dòng)畫
//動(dòng)畫插入隊(duì)列 $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('img').queue('chain', function(){}); $('button').click(function(){ $('img').dequeue('chain'); //刪除隊(duì)列中的動(dòng)畫 }) cleaeQueue(name)//刪除所有未執(zhí)行的隊(duì)列中的動(dòng)畫 delay(duration, name)//為隊(duì)列中所有未執(zhí)行的動(dòng)畫添加延遲
相信本文所述對大家的jQuery程序設(shè)計(jì)有一定的借鑒價(jià)值。
- jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
- JQuery動(dòng)畫animate的stop方法使用詳解
- 利用jquery動(dòng)畫特效和css打造的側(cè)邊彈出垂直導(dǎo)航
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
- jQuery動(dòng)畫效果-slideUp slideDown上下滑動(dòng)示例代碼
- jQuery動(dòng)畫效果-fadeIn fadeOut淡入淺出示例代碼
- jQuery動(dòng)畫animate方法使用介紹
- JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
- jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)
相關(guān)文章
jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂?shù)南嚓P(guān)資料,并附上示例,非常實(shí)用,需要的朋友可以參考下2015-04-04jQuery動(dòng)畫_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
用JavaScript手動(dòng)實(shí)現(xiàn)動(dòng)畫效果,需要編寫非常復(fù)雜的代碼。下面給分享jQuery內(nèi)置的幾種動(dòng)畫樣式,需要的朋友參考下吧2017-07-07jQuery獲取節(jié)點(diǎn)和子節(jié)點(diǎn)文本的方法
本節(jié)主要介紹了jQuery如何獲取節(jié)點(diǎn)和子節(jié)點(diǎn)文本,下面有個(gè)示例,大家可以參考下2014-07-07jQuery 動(dòng)態(tài)云標(biāo)簽插件
這里推薦給大家一款jquery動(dòng)態(tài)云標(biāo)簽的插件,非常的炫,在指定塊級元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽,a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控,a標(biāo)簽漸隱顯示和漸隱消失,可改變初始化的透明度,鼠標(biāo)懸浮停止動(dòng)畫且透明度最大,層數(shù)最高,鼠標(biāo)離開,恢復(fù)之前狀態(tài)2014-11-11jQuery截取指定長度字符串的實(shí)現(xiàn)原理及代碼
截取指定長度字符串操作在新聞列表這種類型的操作中大量應(yīng)用,下面有個(gè)示例,大家可以參考下2014-07-07jquery實(shí)現(xiàn)跳到底部,回到頂部效果的簡單實(shí)例(類似錨)
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)跳到底部,回到頂部效果的簡單實(shí)例(類似錨)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07