(function($){
 $.fn.extend({
 "slideUp":function(value){ 
  var docthis = this;
  //默認(rèn)參數(shù)
  value=$.extend({
   "li_h":"30",
   "time":2000,
   "movetime":1000
  },value) 
  //向上滑動(dòng)動(dòng)畫
  function autoani(){
  $("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
   $(this).css("margin-top",0).appendTo(".line");
  })
  }
  //自動(dòng)間隔時(shí)間向上滑動(dòng)
  var anifun = setInterval(autoani,value.time);
  
  //懸停時(shí)停止滑動(dòng)，離開時(shí)繼續(xù)執(zhí)行
  $(docthis).hover(function(){
  clearInterval(anifun);  //清除自動(dòng)滑動(dòng)動(dòng)畫
  },function(){
  setInterval(autoani,value.time); //繼續(xù)執(zhí)行動(dòng)畫
  })
 } 
 })
})(jQuery)

主要思路：

　　滑動(dòng)動(dòng)畫，就是改變?cè)氐奈恢?，要改變?cè)氐奈恢糜袃煞N方法，一種改變left，top屬性(相對(duì)定位和絕對(duì)定位),還有一種，就是現(xiàn)在這里用到的,改變margin的值。

　　上例中動(dòng)畫過程：

　　　　1.設(shè)置要改變margin-top的值;

　　　　2.用animate方法改變第一個(gè)LI的margin-top的值為-30（負(fù)值會(huì)向上移動(dòng)）;

　　　　3.在動(dòng)畫完成之后，回調(diào)函數(shù)內(nèi)，把當(dāng)前的第一個(gè)LI的margin-top改變?yōu)?0"

　　　　4.把當(dāng)前這第一個(gè)LI移動(dòng)到所有LI的最后一個(gè)。（實(shí)現(xiàn)無縫）

案例下載：http://xiazai.jb51.net/201612/yuanma/myslidup(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，謝謝對(duì)腳本之家的支持！

您可能感興趣的文章:

相關(guān)文章

基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時(shí)候，我們經(jīng)常會(huì)面臨一個(gè)問題，就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中，雖然好幾種方式實(shí)現(xiàn)，但是今天介紹時(shí)我最喜歡的方法，通過css和jQuery實(shí)現(xiàn)。
2011-08-08
jquery中動(dòng)態(tài)效果小結(jié)
只需引入jqery.js,不需要引入插件，利用jquery定義的一些基本方法，就能實(shí)現(xiàn)諸如隱藏，顯示，淡入，淡出，半透明等
2010-12-12
jQuery HTML獲取內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML獲取內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML獲取內(nèi)容和屬性相關(guān)函數(shù)用法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能示例【附源碼下載】
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并附帶源碼下載,需要的朋友可以參考下
2019-06-06
下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問題探討
使用jquery做了一個(gè)項(xiàng)目，下拉列表選擇項(xiàng)變化時(shí)，獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問題在本文將為大家介紹下
2013-09-09
利用jQuery異步上傳文件的插件用法詳解
這篇文章主要介紹了利用jQuery異步上傳文件的插件用法詳解,需要的朋友可以參考下
2017-07-07
基于jquery的$.ajax async使用
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
2011-10-10
寫出高效jquery代碼的19條指南
討論jQuery和javascript性能的文章并不罕見。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會(huì)帶來速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)
2014-03-03
ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼，以實(shí)例代碼講訴了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2017-03-03
Jquery實(shí)現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度
本文給大家分享的是Jquery實(shí)現(xiàn)textarea根據(jù)文本內(nèi)容自適應(yīng)高度，這些在平時(shí)的項(xiàng)目中挺實(shí)用的，所以抽空封裝了一個(gè)文本框根據(jù)輸入內(nèi)容自適應(yīng)高度的插件，這里推薦給小伙伴們。
2015-04-04