jQuery编程动画的基本方法实例分析

今天主机评测网小编给大家分享一下jQuery编程动画的基本方法实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、动画

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(){varmyDiv=$("div");myDiv.clearQueue();myDiv.stop();});

.fadeTo()

调整匹配元素的透明度。

透明度的值为：0～1

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

以上就是“jQuery编程动画的基本方法实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：redis?stream怎么实现消息队列

下一篇：怎么使用python做图片搜索引擎并保存到本地

---