快捷導(dǎo)航

jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法

更新時(shí)間：2015年01月15日 11:38:51 投稿：shichen2014

這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法。分享給大家供大家參考。

具體實(shí)現(xiàn)方法如下：

<html>

<head>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(function(){

  $("div").mouseover(function(){

   $(this).animate({"width":"320","height":"100"},100);

   $(this).animate({"width":"310","height":"90"},100);

  }).mouseout(function(){

   $(this).animate({"width":"300","height":"80"},100);

  });

 });

</script>

<style type="text/css">

div{width:300px;height:80px;border-radius:8px;background:green;margin-top:10px;}

</style>

</head>

<body style="background-color:#e8e8e8;">

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

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

您可能感興趣的文章:

相關(guān)文章

jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問題：一個(gè)頁面有大量的圖片導(dǎo)致頁面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁用戶體驗(yàn)很不好。那么如何解決這個(gè)問題呢？下面我來介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。
2015-04-04
jQuery中DOM操作原則實(shí)例分析
這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實(shí)例形式分析了jQuery針對(duì)dom元素操作的四種常見原則,需要的朋友可以參考下
2019-08-08
jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果,涉及jQuery事件響應(yīng)及元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
jquery eval解析JSON中的注意點(diǎn)介紹
在JS中將JSON的字符串解析成JSON數(shù)據(jù)格式，一般有兩種方式：使用eval()函數(shù)、使用Function對(duì)象來進(jìn)行返回解析，下面有個(gè)示例，感興趣的朋友可以參考下
2013-08-08
jQuery對(duì)象與DOM對(duì)象轉(zhuǎn)換方法詳解
這篇文章主要介紹了jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了jQuery對(duì)象及DOM對(duì)象的作用與二者的相互轉(zhuǎn)換技巧,需要的朋友可以參考下
2016-05-05
jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果,通過jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式實(shí)現(xiàn)flash切換的效果,非常經(jīng)典實(shí)用,文末還提供了demo源碼供讀者下載學(xué)習(xí)或使用,需要的朋友可以參考下
2016-11-11
利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對(duì)jQuery中的deferred還不了解,jQuery的deferred對(duì)象詳解一文接下來介紹deferred對(duì)象如何實(shí)現(xiàn)異步順序加載JS文件，感興趣的你可以參考下哈
2013-03-03
如何實(shí)現(xiàn)星星評(píng)價(jià)（jquery.raty.js插件）
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評(píng)價(jià)功能：后臺(tái)傳數(shù)據(jù)，前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12
使用jquery.qrcode.min.js實(shí)現(xiàn)中文轉(zhuǎn)化二維碼
本文給大家介紹的是一款jQuery的插件jquery.qrcode.min.js，其主要功能是可以生成二維碼，而且可以完美支持中文，下面就給小伙伴們介紹下他的用法
2016-03-03
jQuery中wrapInner()方法用法實(shí)例
這篇文章主要介紹了jQuery中wrapInner()方法用法,實(shí)例分析了wrapInner()方法的功能、定義及包裹匹配元素的使用技巧,需要的朋友可以參考下
2015-01-01