jquery應(yīng)用實(shí)例分享_實(shí)現(xiàn)手風(fēng)琴特效

更新時(shí)間：2018年02月01日 08:35:33 作者：蘭亭序亂

下面小編就為大家分享一篇jquery應(yīng)用實(shí)例_實(shí)現(xiàn)手風(fēng)琴特效的示例代碼。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

效果：

實(shí)例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{padding: 0px;margin: 0px;}
  li{
   width: 80px;height:300px;
   float: left;overflow: hidden;
   list-style: none;
  }

 </style>
 <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<script >
 $(function () {
  $("ul li").mouseover(function (){
   $(this).stop().animate({width:350},500)//stop函數(shù)：停止當(dāng)前正在運(yùn)行的動(dòng)畫
   //siblings:遍歷
   $(this).siblings().stop().animate({width:80},500)//anmate：500ms后將其width變?yōu)?0px；
  })
 })
</script>
<div>
 <ul>
 <li style="width: 350px"><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>
</div>
</body>
</html>

以上這篇jquery應(yīng)用實(shí)例分享_實(shí)現(xiàn)手風(fēng)琴特效就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)加載與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery實(shí)現(xiàn)兩款有動(dòng)畫功能的導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)兩款有動(dòng)畫功能的導(dǎo)航菜單代碼,涉及jQuery動(dòng)畫效果的不同實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jquery中g(shù)et和post的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中g(shù)et和post的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery實(shí)現(xiàn)在列表的首行添加數(shù)據(jù)
這篇文章主要介紹了jQuery實(shí)現(xiàn)在列表的首行添加數(shù)據(jù)的方法，十分的簡(jiǎn)單，有需要的小伙伴可以參考下。
2015-05-05
Jquery中dialog屬性小記
Jquery中dialog屬性小記，使用jquery dialog的朋友可以參考下。
2010-09-09
jQuery插件版本沖突的處理方法分析
這篇文章主要介紹了jQuery插件版本沖突的處理方法,結(jié)合具體實(shí)例形式分析了jQuery基于noConflict方法解決版本沖突的處理技巧,需要的朋友可以參考下
2017-01-01
JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
jquery實(shí)現(xiàn)在頁(yè)面加載的時(shí)自動(dòng)為日期插件添加當(dāng)前日期
這篇文章主要介紹了通過(guò)jquery實(shí)現(xiàn)在頁(yè)面加載的時(shí)自動(dòng)為日期插件添加當(dāng)前日期,需要的朋友可以參考下
2014-08-08
jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕
這篇文章主要為大家詳細(xì)介紹了jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
這篇文章主要介紹了JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果，需要的朋友可以參考下
2015-09-09