如何运用jQuery实现编程动画的基本方法示例详解？

本文共计766个文字，预计阅读时间需要4分钟。

目录

一、动画方法

.show()、.hide()、.fadeIn()、.fadeOut()、.animate()、.slideDown()、.slideUp()、.delay()、.clearQueue()、.fadeTo() 等这些方法提供了丰富的动画效果，使页面元素动起来。

.show()显示被隐藏的元素。

.hide()隐藏显示的元素。

.fadeIn()以淡入效果显示元素。

.fadeOut()以淡出效果隐藏元素。

.animate()通过CSS样式进行动画效果。

.slideDown()以滑动效果显示元素。

.slideUp()以滑动效果隐藏元素。

.delay()在动画执行后延迟一段时间。

.clearQueue()清除动画队列。

.fadeTo()通过改变透明度来显示或隐藏元素。

二、自定义动画.animate()除了提供基本动画方法外，jQuery还允许用户自定义动画效果。

.animate()用户可以指定动画的目标值，并设置动画持续时间和缓动函数。

目录

• 一、动画
• .show()
• .hide()
• .fadeIn()
• .fadeOut()
• .animate()
• .slideDown()
• .slideUp()
• .delay()
• .clearQueue()
• .fadeTo()

一、动画

jQuery提供了一些列的动画基本方法，同时也提供了自定动画方案.animate()。

.show()

当提供一个 duration（持续时间）参数，.show()成为一个动画方法。.show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。

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

出了上述时间，还可以自定时间，接受毫秒为参数

jQuery默认只提供两个缓冲效果：调用 swing, 在一个恒定的速度进行；调用 linear. 更多的缓动函数要使用的插件

$("button").click(function () { $("p").show("slow"); });

.hide()

$("#hidr").click(function () { $("div").hide(1000); });

.fadeIn()

通过淡入的方式显示匹配元素。

$(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); });

.fadeOut()

通过淡出的方式显示匹配元素。

$("p").fadeOut("slow");

.animate()

$("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 ); });

.slideDown()

用滑动动画显示一个匹配元素。

$("div").slideDown("slow");

.slideUp()

$(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("slow"); } else { $("div").slideUp(); } });

.delay()

设置一个延时来推迟执行队列中后续的项。

$("div.first").slideUp(300).delay(800).fadeIn(400);

.clearQueue()

从列队中移除所有未执行的项。

$("#start").click(function () { $("div").slideUp(300).delay(800).fadeIn(400); }) $("#stop").click(function () { var myDiv = $("div"); myDiv.clearQueue(); myDiv.stop(); });

.fadeTo()

调整匹配元素的透明度。

透明度的值为：0～1

$(this).fadeTo("fast", Math.random());

以上就是jQuery编程动画的基本方法示例详解的详细内容，更多关于jQuery编程动画方法的资料请关注易盾网络其它相关文章！