您的位置：首页 > Web前端 > JQuery

Jquery 滑动--slideToggle()

2015-04-19 13:41 113 查看

.slideToggle( [duration ] [, complete ] )返回: jQuery

描述: 用滑动动画显示或隐藏一个匹配元素。

添加的版本: 1.0.slideToggle( [duration ] [, complete ] )

duration (默认: 400)

类型: Number or String

一个字符串或者数字决定动画将运行多久。

complete

类型: Function()

在动画完成时执行的函数。

添加的版本: 1.0.slideToggle( options )

options

类型: PlainObject

一组包含动画选项的值的集合。支持的选项:

duration (default: 400)

Type: Number or String

一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: “normal”，三种预定速度的字符串(“slow”, “normal”, 或 “fast”)或表示动画时长的毫秒数值(如：1000) ）

easing (default: swing)

Type: String

一个字符串，表示过渡使用哪种缓动函数。（愚人码头注：jQuery自身提供”linear” 和 “swing”，其他效果可以使用jQuery Easing Plugin插件）

queue (default: true)

Type: Boolean or String

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue(“queuename”)来启动它。

specialEasing

Type: PlainObject

一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 ( 1.4 新增)

step

Type: Function( Number now, Tween tween )

每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

progress

Type: Function( Promise animation, Number progress, Number remainingMs )

每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: 1.8)

complete

Type: Function()

在动画完成时执行的函数。

done

Type: Function( Promise animation, Boolean jumpedToEnd )

在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)

fail

Type: Function( Promise animation, Boolean jumpedToEnd )

动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)

always

Type: Function( Promise animation, Boolean jumpedToEnd )

在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

添加的版本: 1.4.3.slideToggle( [duration ] [, easing ] [, complete ] )

duration (默认: 400)

类型: Number or String

一个字符串或者数字决定动画将运行多久。

easing (默认: swing)

类型: String

一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供”linear” 和 “swing”，其他可以使用相关的插件）

complete

类型: Function()

在动画完成时执行的函数

.slideToggle()方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
p { clear: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
<script>
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航