动画效果:

1.显示/隐藏动画效果

动态的改变当前元素的宽,高和不透明度

	show([duration],[fn]);		//显示当前元素
hide([duration],[fn]); //隐藏当前元素
toggle([duration],[fn]); //切换当前元素的可见状态
duration:动画效果运行的时间,默认为0,立即显示元素
关键字:"slow","normal","fast" - 0.6,0.4,0.2秒
数字:600,400,200,... 单位是毫秒
fn:在动画完成时执行的函数

2.淡入/淡出动画效果

动态的改变当前元素的透明度(其他不变)

	fadeIn([duration],[fn])		//显示当前元素	- 淡入效果
fadeOut([duration],[fn]) //隐藏当前元素 - 淡出效果
fadeToggle([duration],[fn]) //切换当前元素的可见状态 -- duration默认为normal,0.4秒
fadeTo([duration],opacity,[fn]) //在指定时间内,从当前透明度淡到指定透明度
opacity:指定不透明值,取值范围是0-1,0代表完全透明,1代表完全不透明

3.滑入/滑出动画效果

动态的改变当前元素的高度(其他不变)

	slideDown([duration],[fn])		//显示当前元素	- 由上到下滑入
slideUp([duration],[fn]) //隐藏当前元素 - 由下到上滑出
slideToggle([duration],[fn]) //切换当前元素的可见状态

4.自定义动画

动态的改变当前元素的各种CSS属性

	animate(properties,[duration],[fn])
properties:使用一个"name:value"形式的对象,{name:value,name:value,...},用来设置改变的css属性
animate():只能改变可以取数字值的css属性,如大小,边框,定位,字体,背景,...
移动元素是需要显示元素的position属性为absolute/relative.
"队列"动画:元素执行多个动画效果,即元素执行多个animate()方法,按照方法的顺序进行动画效果的展示.

5.动画停止

stop()结束当前动画,立即进入到下一个动画

	stop([clearQueue],[gotoEnd])
clearQueue:是否清空未执行完的动画队列.设置true,可以立即结束动画
gotoEnd:是否立即完成正在执行的动画.设置true,并且重设show和hide的原始样式,调用回调函数等

四:Jquery-animate的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  3. jquery animate函数实现

    jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...

  4. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  5. jquery animate()背景色渐变的处理

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...

  6. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  7. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  8. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  9. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  10. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...

随机推荐

  1. redis 数据备份持久化方案

    本文链接:http://www.cnblogs.com/zhenghongxin/p/9050219.html 使用两种备份方案 备份方案选择RDB和AOF同时进行备份,必须打开AOF的持久化机制,除 ...

  2. Python 读取大文件的方式

    对于读取容量小的文件,可以使用下面的方法: with open("path", "r") as f: f.read() 但是如果文件容量很大,高达几个G或者十几 ...

  3. Django准备知识-web应用、http协议、web框架、Django简介

    一.web应用 Web应用程序是一种可以通过web访问的应用程序(web应用本质是基于socket实现的应用程序),程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件 ...

  4. 程序猿的日常——SpringMVC系统架构与流程回顾

    web开发经历了很漫长的时间,在国内也快有十几年的时间了.从最开始的进程级到现在的MVC经历了很多的改进和优化,本篇就主要复习了解下Spring MVC相关的知识. 发展历程 第一阶段 CGI进程响应 ...

  5. jvm特性(3)( 收集算法和收集器的概念)

    java内存模型和线程规范 JVM高级特性与实践(三):垃圾收集算法 与 垃圾收集器实现 大致知识点如下: 4种垃圾收集算法概念的学习 7种垃圾收集器特征的学习 一. 垃圾收集算法 1. 标记-清除算 ...

  6. 把本地git仓库的项目上传到远程仓库

    之前在学校实验室服务器上建了一个git远程仓库,存放我写的express项目代码.后来由于出去实习,就无法访问那个远程仓库了,因为它在校园网内. 还好我的笔记本中有这个项目完整的本地仓库,于是我就试着 ...

  7. 【bzoj4332】【JSOI2012】 分零食 生成函数 FFT

    我们构造$f(x)$的生成函数$G(x)$,那么显然$[x^k]G(x)=Ok^2+Sk+U$ 那么显然,答案即为$\sum_{i=1}^{n} [x^m]G^i(x)$ 我们构造答案的生成函数$F( ...

  8. Java 注解实例

    package com.annotation; import java.lang.annotation.Retention; import java.lang.annotation.Target; i ...

  9. java面试③Web部分

    2.2.1 讲一下http get和post请求的区别 get和post请求都是http的请求方式,用户通过不同的http请求方式完成对资源(url)的不同操作,具体点来讲get一般用于获取/查询资源 ...

  10. 使用vue2+Axios+Router 之后的总结以及遇到的一些坑

    构建 vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如: 代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便 PostCss, ...