jQuery 效果函数
方法 | 描述 |
---|---|
animate() | 对被选元素应用“自定义”的动画 |
clearQueue() | 对被选元素移除所有排队的函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
hide() | 隐藏被选的元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选的元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止在被选元素上运行动画 |
toggle() | 对被选元素进行隐藏和显示的切换 |
jquery特殊效果
下面的这些动画的方法,一般都可以使用两个参数(也可以不传)
- 参数1
speed
: 动画的速度,单位毫秒。 三个预定义的值(slow 慢
,normal 正常
,fast 快
) - 参数2: 指定切换效果
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
- 参数3: 回调函数,在动画完成时执行的函数,每个元素执行一次
.show([speed,[easing],[fn]]) 显示
.hide([speed,[easing],[fn]]) 隐藏
.toggle([speed],[easing],[fn]) 切换
.slideUp([speed,[easing],[fn]]) 滑入(上)
.slideDown([speed],[easing],[fn]) 滑出(下)
.slideToggle([speed],[easing],[fn])) 切换滑入和滑出
.fadeIn([speed],[easing],[fn]) 淡入
.fadeOut([speed],[easing],[fn]) 淡出
.fadeToggle([speed,[easing],[fn]]) 切换淡入淡出
.fadeTo(([speed,透明值,[fn]) 改变透明度
.stop() 停止动画
.animate(css属性的键值对,[时间(毫秒)],[fn]) 动画的方法
复制代码
<style>
div { width: 0;height: 0;background-color: palevioletred; }
</style>
<div></div>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
$('div').animate({
width: 500,
height: 500,
}, 1000, 'swing', function () {
alert('done!')
})
</script>
复制代码
参数可以写成数字表达式:
<style>
div { width: 0;height: 0;background-color: palevioletred; }
</style>
<div></div>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
$('div').animate({
width: '+=500',
height: '500',
}, 1000, 'swing', function () {
alert('done!')
})
</script>
复制代码
stop()
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#start").click(function () {
$("#box").animate({ height: 300 }, 2000);
$("#box").animate({ height: 100 }, 2000);
});
$("#stop").click(function () {
$("#box").stop();
});
});
</script>
复制代码