jquery實現(xiàn)滑動特效代碼
在項目中，有需求要使用jquery實現(xiàn)滑動效果，于是把相關內(nèi)容整理如下，下文介紹了很詳細，有文字說明和代碼分析，需要的朋友可以來學習下。
實現(xiàn)方式一：
.slideUp([duration][,complete])——目標元素向上滑入隱藏；
.slideDown([duration][,complete])——目標元素向下滑出顯示；
.slideToggle([duration][,complete])——目標元素隱藏則向下滑出顯示，否則向上滑入隱藏；
注：duration為方法執(zhí)行的時間區(qū)間，complete為回調(diào)函數(shù)。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>滑動效果</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/slide.js"></script>
<style>
img{
width:500px;
}
</style>
</head>
<body>
<div>
<div>
<button id="btn1">向上劃入隱藏</button>
<button id="btn2">向下滑出顯示</button>
<button id="btn3">向上劃入隱藏/向下滑出顯示</button>
</div>
<img src="images/2.jpg"/>
</div>
</body>
</html>
slide.js代碼：
/*滑動效果*/
$(document).ready(function(){
//向上滑入
$('#btn1').click(function(){
$('img').slideUp(2000);
});
//向下滑出
$('#btn2').click(function(){
$('img').slideDown(2000);
});
//切換滑動
$('#btn3').click(function(){
$('img').slideToggle(2000);
});
})
實現(xiàn)方式二：
一、jQuery___效果(滑動效果)
slideDown(speed, [callback])
概述
通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。
這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
參數(shù)
speedString,Number
三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
callback (可選)FunctionFunction
在動畫完成時執(zhí)行的函數(shù)
示例
描述:
用600毫秒緩慢的將段落滑下
jQuery 代碼:
$("p").slideDown("slow");
描述:
用200毫秒快速將段落滑下，之后彈出一個對話框
jQuery 代碼:
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
slideUp(speed, [callback])
概述
通過高度變化（向上減小）來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。
這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
參數(shù)
speedString,Number
三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
callback (可選)Function
在動畫完成時執(zhí)行的函數(shù)
示例
描述:
用600毫秒緩慢的將段落滑上
jQuery 代碼:
$("p").slideUp("slow");
描述:
用200毫秒快速將段落滑上，之后彈出一個對話框
jQuery 代碼:
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
slideToggle(speed, [callback])
概述
通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。
這個動畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
參數(shù)
speedString,Number
三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
callback (可選)Function
在動畫完成時執(zhí)行的函數(shù)
示例
描述:
用600毫秒緩慢的將段落滑上或滑下
jQuery 代碼:
$("p").slideToggle("slow");
描述:
用200毫秒快速將段落滑上或滑下，之后彈出一個對話框
jQuery 代碼:
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
以上內(nèi)容是jquery實現(xiàn)滑動特效代碼，希望大家喜歡。
相關文章
jQuery EasyUI API 中文文檔 - Parser 解析器
jQuery EasyUI API 中文文檔 - Parser 解析器，使用jQuery EasyUI的朋友可以參考下。2011-09-09
這篇文章主要介紹了jQuery事件綁定用法,結合多個實例較為詳細的分析了常見的jQuery事件綁定實現(xiàn)技巧與使用方法,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery獲取頁面及個元素高度、寬度的總結——超實用,需要的朋友可以參考下2015-07-07
jQuery 遍歷- 關于closest() 的方法介紹以及與parents()的方法區(qū)別分析
本篇文章介紹了，jQuery 遍歷- 關于closest() 的方法介紹以及與parents()的方法區(qū)別分析。需要的朋友參考下2013-04-04
jQuery oLoader實現(xiàn)的加載圖片和頁面效果
我們使用jQuery的ajax在頁面中就像使用iframe一樣加載其他頁面內(nèi)容，今天我給大家分享一個名叫jQuery oLoader的插件，該插件還集成了oPageLoader，可以輕松實現(xiàn)加載圖片和頁面的漂亮效果。2015-03-03
這篇文章介紹了Jquery定義對象(閉包)與擴展對象成員的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Jquery的val()方法不僅能夠設置元素的值，同時也能獲取元素的值。常見的操作是對文本框的操作，比如判斷郵箱地址等2012-06-06
這篇文章主要介紹了jquery禁用右鍵單擊功能屏蔽F5刷新的具體實現(xiàn),需要的朋友可以參考下2014-03-03
jQuery修改DOM結構_動力節(jié)點Java學院整理
這篇文章主要介紹了jQuery修改DOM結構的相關知識，需要的的朋友參考下吧2017-07-07
圖片展示想必大家都見到過吧，下面有個不錯的例子，通俗易懂，使用jquery實現(xiàn)的，感興趣的朋友不要錯過2013-11-11