jQuery 效果 - 滑动
jQuery提供了一个简单的界面来执行各种惊人的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。
jQuery滑动方法
使用jQuery，我们可以在元素上创建滑动效果。
我们有以下jQuery幻灯片方法：
slideUp()
slideDown()
slideToggle()
下面将向您展示如何使用每种滑动方法。
jQuery slideUp()和slideDown()
slideUp()方法通过滑动隐藏选定的元素。
slideDown()方法以滑动方式显示选定的元素。
下面的示例演示了slideUp()方法和slideDown()方法的用法：
示例
// 向上滑动段落 $("#btn1").click(function(){
$("p").slideUp();
});// 向下滑动段落 $("#btn2").click(function(){
$("p").slideDown();
});测试看看‹/›
这是slideUp() 方法的语法：
$(selector).slideUp(duration, easing, callback);
这是slideDown()方法的语法：
$(selector).slideDown(duration, easing, callback);
无论slideUp()和slideDown()方法接受三个可选参数：
duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定滑动方法完成后要调用的函数
下面的示例演示了使用slideUp()和slideDown()的duration参数：
示例
$("#btn1").click(function(){
$("p").slideUp(1500);
});
$("#btn2").click(function(){
$("p").slideDown(1500);
});测试看看‹/›
下面的示例演示了带有slideUp()和slideDown()的回调参数：
示例
$("#btn1").click(function(){
$("div").slideUp(1500, function(){
alert("向上滑动完成!");
});
});
$("#btn2").click(function(){
$("div").slideDown(1500, function(){
alert("向下滑动完成!");
});
});测试看看‹/›
动画化所有跨度（在这种情况下为单词）以快速滑动，在200毫秒内完成每个动画：
示例
$("button").click(function(){
$("span:last-child").slideUp("fast", function(){
$(this).prev().slideUp("fast", arguments.callee);
});
});测试看看‹/›
jQuery slideToggle()方法
我们还可以使用slideToggle()方法在上下滑动HTML元素之间切换。
如果所选元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
下面的示例在单击按钮时，在所有<p>元素的slideUp和slideDown之间切换：
示例
$("button").click(function(){
$("p").slideToggle(1500);
});测试看看‹/›
这是slideToggle()method 的语法：
$(selector).slideToggle(duration, easing, callback);
slideToggle()方法接受三个可选参数：
duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定一个在slideToggle()方法完成后要调用的函数
jQuery效果参考
有关完整的效果参考，请访问我们的jQuery 效果参考手册。