文章目录
- jQuery 效果 - 滑动
- jQuery slideDown() 方法
- jQuery slideUp() 方法
- jQuery slideToggle() 方法
- jQuery 效果 - 动画
- jQuery 动画 - animate() 方法
- jQuery animate() - 操纵多个属性
- jQuery animate() - 使用相对值
- jQuery animate() - 使用预定义值
- jQuery animate() - 使用队列功能
- jQuery 停止动画
- jQuery stop() 动画（带参数）
- 总结
jQuery 效果 - 滑动
jQuery slide 方法可使元素上下滑动。
使用 jQuery，您可以对元素创建滑动效果。
jQuery 具有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);
可选 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。
可选的回调参数是滑动完成后要执行的函数。
以下示例演示了 slideDown() 方法：
示例
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法：
$(selector).slideUp(speed,callback);
可选的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。
可选的回调参数是滑动完成后要执行的函数。
以下示例演示了 slideUp() 方法：
示例
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法在 slideDown() 和 slideUp() 方法之间切换。
如果元素已经向下滑动，slideToggle() 会将它们向上滑动。
如果元素已经向上滑动，slideToggle() 会将它们向下滑动。
$(selector).slideToggle(speed,callback);
可选的 speed 参数可以采用以下值：“slow”、“fast”、毫秒。
可选的回调参数是滑动完成后要执行的函数。
以下示例演示了 slideToggle() 方法：
示例
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 效果 - 动画
使用 jQuery，您可以创建自定义动画。
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义要动画的 CSS 属性。
可选的 speed 参数指定效果的持续时间。它可以采用以下值：“slow”、“fast”或毫秒。
可选的回调参数是动画完成后要执行的函数。
以下示例演示了 animate() 方法的简单用法；它将 <div> 元素向右移动，直到达到 250px 的 left 属性：
示例
$("button").click(function(){
$("div").animate({left: '250px'});
});
默认情况下，所有 HTML 元素都具有静态位置，并且无法移动。
要操纵位置，请记住首先将元素的 CSS 位置属性设置为相对、固定或绝对！
jQuery animate() - 操纵多个属性
请注意，可以同时为多个属性设置动画：
示例
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
是否可以使用 animate() 方法操纵所有 CSS 属性？
是的，几乎可以！但是，有一件重要的事情要记住：与 animate() 方法一起使用时，所有属性名称都必须采用驼峰式大小写：您需要将 paddingLeft 写成 padding-left，将 marginRight 写成 margin-right，等等。
此外，核心 jQuery 库中不包含颜色动画。
如果您想要为颜色设置动画，则需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。这可以通过在值前面放置 += 或 -= 来实现：
示例
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - 使用预定义值
您甚至可以将属性的动画值指定为“show”、“hide”或“toggle”：
示例
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - 使用队列功能
默认情况下，jQuery 带有动画队列功能。
这意味着如果您连续编写多个 animate() 调用，jQuery 会使用这些方法调用创建一个“内部”队列。然后它会逐个运行动画调用。
因此，如果您想依次执行不同的动画，我们可以利用队列功能：
示例 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
下面的示例首先将 <div> 元素向右移动，然后增加文本的字体大小：
示例 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成之前停止动画或效果。
单击可向下/向上滑动面板
jQuery stop() 动画（带参数）
jQuery stop() 方法用于在动画或效果完成之前停止动画或效果。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数指定是否还应清除动画队列。默认值为 false，这意味着只会停止活动动画，允许随后执行任何排队的动画。
可选的 goToEnd 参数指定是否立即完成当前动画。默认值为 false。
因此，默认情况下，stop() 方法会终止所选元素上正在执行的当前动画。
以下示例演示了不带参数的 stop() 方法：
示例
$("#stop").click(function(){
$("#panel").stop();
});
总结
本文介绍了jQuery 效果-滑动和动画的使用，如有问题欢迎私信和评论
