脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery动画操作方法

JQuery常用简单动画操作方法回顾与总结

 更新时间：2019年12月07日 11:31:54   作者：theVicTory  
这篇文章主要介绍了JQuery常用简单动画操作方法,回顾与总结了jQuery常用的各种动画效果操作方法及相关使用技巧,需要的朋友可以参考下

本文实例讲述了JQuery常用简单动画操作方法。分享给大家供大家参考，具体如下：

jQuery基础动画回顾

.hide()

隐藏动画

.show()

出现动画

.toggle()

切换显示状态

.slideUp()/Down()

下拉/卷起动画

.slideToggle()

下拉卷起切换

.fadeIn()/Out()

淡入/出动画

.fadeToggle()

淡入淡出切换

.fadeTo()

透明度变化到指定透明度，参数为（duration，opacity）

.animate()

控制css动画，参数（properties,option）

.stop()

停止动画的执行

注：

1、可选参数，动画持续时间及结束后的回调函数，持续时间也可以用“slow”/“fast”代替。例如

$("#t").hide(3000,function (){
  alert(“回调函数”);
})
//也可以用JSON格式设置参数
$("#t").hide({
  duration: 3000,
  complete: function() {
    alert(“回调函数”);
  }
})

2、animate中option属性的参数有{duration,easing,step,progress，complete}

  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数，内置的有linear线性变化，swing曲线变化，如果需要其他变化方式需要导入库
  • step：规定每个动画的每一步完成之后要执行的函数
  • progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  • complete：动画完成回调
$('#elem').animate({    //在现有高宽上增加100px
 width : "+=100px",
 height : "+=100px"
}, {
 duration: 5000,    //在5秒内执行完成
 specialEasing: {
  width: 'linear',    //线性过渡效果
  height: 'easeOutBounce'
 },
 complete: function() {
  $(this).after('<div>动画执行完毕!</div>');
 }
});

3、stop()：只会停止第一个动画，后面的继续

  • stop(true)：停止所有动画
  • stop(true ture)：停止动画，直接跳到第一个动画的最终状态

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 使用jQuery实现图片遮罩半透明坠落遮挡

    使用jQuery实现图片遮罩半透明坠落遮挡

    这篇文章主要介绍了使用jQuery实现图片遮罩半透明坠落遮挡，效果非常棒，小伙伴们做相册的时候可以直接拿走使用。
    2015-03-03
  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态
    2014-11-11
  • JQuery操作与遍历元素并设置其属性、样式和内容

    JQuery操作与遍历元素并设置其属性、样式和内容

    本文详细讲解了JQuery操作与遍历元素并设置其属性、样式和内容的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • jQuery 白痴级入门教程

    jQuery 白痴级入门教程

    本文写给那些完全不懂JS，只会一些HTML和CSS的同学！本站就是范例
    2009-11-11
  • 10个基于Jquery的幻灯片插件教程

    10个基于Jquery的幻灯片插件教程

    当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候，以幻灯片滑动的方式是一个不错的选择，这种效果常用于公司网站或者个人BLOG。
    2010-10-10
  • jQuery表单获取和失去焦点输入框提示效果的实例代码

    jQuery表单获取和失去焦点输入框提示效果的实例代码

    这篇文章介绍了jQuery表单获取和失去焦点输入框提示效果的实例代码，有需要的朋友可以参考一下
    2013-08-08
  • Jquery结合HTML5实现文件上传

    Jquery结合HTML5实现文件上传

    本文给大家介绍的是利用Jquery使用HTML5的FormData属性实现对文件的上传的方法和实例，非常的实用，有需要的小伙伴可以参考下。
    2015-06-06
  • jQuery中用dom操作替代正则表达式

    jQuery中用dom操作替代正则表达式

    这篇文章主要介绍了jQuery中用dom操作替代正则表达式的方法,需要的朋友可以参考下
    2014-12-12
  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    当我们遇到提交表单时，需要我们重复添加好几个表单，在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮，也就是新增一项，通过点击复制按钮来实现新增一项，怎么实现的呢？下面小编跟大家分享，需要的朋友的朋友可以参考下
    2015-09-09
  • jquery隐藏标签和显示标签的实例

    jquery隐藏标签和显示标签的实例

    在jquery中我们要实现点击按钮隐藏标签和显示标签，只要绑定指定button或其它，这样点击时调用hide或show函数即可解决，下面看个实例就明白了
    2013-11-11

最新评论