项目中需要使用jquery来实现滑动效果，因此相关内容整理如下。下面是非常详细的介绍，有文字说明和代码分析。需要的朋友可以学习。

实施方式1:向上滑动([duration] [，complete]) ——目标元素向上滑动隐藏；向下滑动([持续时间] [，完成]) ——目标元素向下滑动并显示；slidetoggle ([duration] [，complete]) ——如果目标元素被隐藏，它将向下滑动以显示，否则它将向上滑动以隐藏；注意：duration是方法执行的时间间隔，complete是回调函数。

！doctype html lang=' zh _ cn ' head meta charset=' utf-8 ' title sliding effect/title script src=' http 3360 js/jquery-2 . 1 . 3 . min . js '/script script src=' http 3360 js/slide . js '/script styleimg { width 3333 }/style/headsdy div按钮id=' BTN 1 ' draw hide up/button button id=' BTN 2 '滑出显示down/button id=' BTN 3 ' draw

/*幻灯片效果*/$(文档)。ready(function(){//向上滑入$ ('# btn1 ')。单击(function () {$ ('img '))。slideup (2000年)；});//滑出$ ('# btn2 ')。单击(function () {$ ('img '))。下滑(2000年)；});//切换到slide $ ('# btn3 ')。单击(function () {$ ('img '))。滑动切换(2000年)；});})

实施方式2:

一、jQuery___效应(滑动效应)

向下滑动(速度，[回调])

概述所有匹配的元素都是通过改变高度(向下增加)来动态显示的，显示完成后可以选择触发回调函数。这个动画效果只调整元素的高度，这样匹配的元素就可以“滑动”的方式显示出来。在jQuery 1.3中，上下的填充和边距也会被动画化，效果会更流畅。

参数

速度字符串，数字

一个字符串(“慢”、“正常”或“快”)，它是三个预定速度之一，或者一个毫秒值(例如1000)，表示动画持续时间，回调(可选)函数

动画完成时要执行的功能

例子

描述：

在600毫秒内慢慢向下滑动段落

JQuery代码：

$('p ')。向下滑动(“慢”)；描述：

在200毫秒内快速向下滑动段落，然后弹出一个对话框

JQuery代码：

$('p ')。向下滑动(快速)，函数(){警报(动画完成));});向上滑动(速度，[回调])

摘要

通过改变高度(向上递减)动态隐藏所有匹配的元素，隐藏完成后可选地触发回调函数。这个动画效果只调整元素的高度，这样匹配的元素就可以通过“滑动”来隐藏。在jQuery 1.3中，上下的填充和边距也会被动画化，效果会更流畅。

参数

速度字符串，数字

三种预定速度之一的字符串(“慢”、“正常”或“快”)或表示动画持续时间的毫秒值(例如1000)

回调(可选)函数

动画完成时要执行的功能

例子

描述：

在600毫秒内慢慢向上滑动段落

JQuery代码：

$('p ')。向上滑动(“慢”)；描述：

在200毫秒内快速向上滑动段落，然后弹出一个对话框

JQuery代码：

$('p ')。向上滑动('快速'，函数(){警报('动画完成'));});滑动切换(速度，[回调])

摘要

所有匹配元素的可见性通过高度变化进行切换，切换完成后可选地触发回调函数。此动画效果仅调整元素的高度，以便匹配的元素可以“滑动”方式隐藏或显示。在jQuery 1.3中，上下的填充和边距也会被动画化，效果会更流畅。

参数

速度字符串，数字

三种预定速度之一的字符串(“慢”、“正常”或“快”)或表示动画持续时间的毫秒值(例如1000)

回调(可选)函数动画完成后要执行的函数

例子

描述：

在600毫秒内慢慢上下滑动段落

JQuery代码：

$('p ')。slideToggle('慢速')；描述：

在200毫秒内快速上下滑动段落，然后弹出一个对话框

JQuery代码：

$('p ')。slideToggle('fast '，function(){ alert('动画完成'));});以上内容是jquery实现滑动特效的代码，希望大家喜欢。