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

主要思路：

　　滑動動畫，就是改變元素的位置，要改變元素的位置有兩種方法，一種改變left，top屬性(相對定位和絕對定位),還有一種，就是現(xiàn)在這里用到的,改變margin的值。

　　上例中動畫過程：

　　　　1.設置要改變margin-top的值;

　　　　2.用animate方法改變第一個LI的margin-top的值為-30（負值會向上移動）;

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

　　　　4.把當前這第一個LI移動到所有LI的最后一個。（實現(xiàn)無縫）

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

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

您可能感興趣的文章:

相關(guān)文章

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