jQuery编程动画的基本方法示例详解

更新时间：2022年08月10日 08:58:30 作者：RiemannHypothesis

这篇文章主要为大家介绍了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 () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});

.fadeTo()

调整匹配元素的透明度。

透明度的值为：0～1

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

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

您可能感兴趣的文章:

基于jQuery实现音乐播放试听列表
这篇文章主要介绍了基于jQuery实现音乐播放试听列表的相关资料,需要的朋友可以参考下
2016-04-04
jQuery 判断元素整理汇总
本文给大家汇总介绍了jQuery的几种判断元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能够喜欢
2017-02-02
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法
2013-04-04
JQuery UI的拖拽功能实现方法小结
JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能
2012-03-03
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
这是一个典型的Ajax应用，在页面上，您只需要点击“下一页”，数据区将自动加载对应页码的数据，重新刷新数据区。类似的效果在很多网站上应用，尤其在一些需要展示大量图片数据的网页如淘宝商品列表页，Ajax分页效果让您的网站数据加载显得非常流畅。
2015-09-09
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的3D双柱状图效果,涉及jQuery使用插件FusionCharts结合xml数据绘制的3D双柱状图的相关操作技巧,需要的朋友可以参考下
2017-04-04
jQuery实现的简洁下拉菜单导航效果代码
这篇文章主要介绍了jQuery实现的简洁下拉菜单导航效果代码,通过简单的自定义函数实现页面样式切换功能,非常简洁实用,需要的朋友可以参考下
2015-08-08
jquery实现LED广告牌旋转系统图片切换效果代码分享
这篇文章主要介绍了jquery实现LED广告牌旋转系统图片切换效果类似路边场景，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
jQuery插件制作之参数用法实例分析
这篇文章主要介绍了jQuery插件制作之参数用法,以实例形式较为详细的分析了jQuery插件制作过程中参数的相关使用技巧,需要的朋友可以参考下
2015-06-06
Jquery解析Json格式数据过程代码
Json是一种轻量级的数据交换格式，本节为大家介绍的是Jquery解析Json格式数据的过程，很详细，看看就知道了
2014-10-10