JQ动画的简单介绍
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
#btn{
width: 100px;
text-align: center;
height: 30px;
cursor: pointer;
-webkit-user-select: none;
background: orange;
line-height: 30px;
}
#show{
width: 200px;
height: 200px;
background: orchid;
margin-top: 20px;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="btn">显示隐藏</div>
<div id="show">
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#show").hide(10000);
$("#btn").get(0).onclick = function(){
1.hide 隐藏
$("#show").hide(3000);
可以接受一个回调函数,当动画执行完毕之后就会触发回调函数.
$("#show").hide(3000,function(){
alert("已经完全隐藏");
});
$("#show").hide(3000,"linear",function(){
alert("已经全部隐藏")
});
//时间问题 fast slow normal
$("#show").hide("normal");
//show 显示
$("#show").show("slow",function(){
alert("显示好了")
})
//3.toggle:显示或隐藏当前元素,显示的时候就隐藏,隐藏的时候就显示.
$("#show").toggle(3000);
//4.fadeIn:先显示元素,后改变透明度(opacity)逐步提升到100%;
$("#show").fadeIn(5000);
//5.fadeOut:将当前元素的不透明不逐步降为0,在隐藏元素.
$("#show").fadeOut(5000);
//6.fadeToggle:以逐渐透明或逐渐不透明的方式,折叠显示当前元素
$("#show").fadeToggle(3000);
//7.slideDown:以从上向下滑入的方式显示当前元素
$("#show").slideDown(3000);
//8.slideUp : 以从下向上滑出的方式隐藏当前元素.
$("#show").slideUp(3000);
//9.slideToggle :以垂直滑入或滑出的方式,折叠显示当前元素
$("#show").slideToggle(3000);
//10.animate
//3个参数
//1.结束的时候css属性的值(数值类相关的属性 背景颜色 border不好使)
//2.时间
//3.回调函数
// $("#show").animate({
//// width:"30px",
//// opacity:"0.2",
//// left:"500px",
//// top:"600px"
// width:"0px",
// height:"0px",
// opacity:"0",
//
// },3000,function(){
// alert("动画结束");
// }) ;
//11.stop 停止动画的意思
//$("#show").stop();
//12.delay 延迟执行动画(如果需要执行延迟动画操作,需要先写延迟代码)
$("#show").delay(3000);
$("#show").toggle(1000);
}
JQ动画的简单介绍的更多相关文章
- Rebound动画框架简单介绍
Rebound动画框架简单介绍 Android菜鸟一枚,有不对的地方希望大家指出,谢谢. 最近在接手了一个老项目,发现里面动画框架用的是facebook中的Rebound框架,由于以前没听说过,放假时 ...
- css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...
- 关于JQuery简单介绍
jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...
- jQuery学习----简单介绍，基本使用，操作样式，动画
jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...
- 《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言
http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn. ...
- UIDynamic(简单介绍)
一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如:重力.弹性碰撞等现 ...
- iOS开发——多线程篇——快速生成沙盒目录的路径，多图片下载的原理、SDWebImage框架的简单介绍
一.快速生成沙盒目录的路径 沙盒目录的各个文件夹功能 - Documents - 需要保存由"应用程序本身"产生的文件或者数据,例如:游戏进度.涂鸦软件的绘图 - 目录中的文件会被 ...
- iOS开发拓展篇—UIDynamic(简单介绍)
iOS开发拓展篇—UIDynamic(简单介绍) 一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟 ...
- unity Dotween插件的简单介绍及示例代码
unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...
随机推荐
- Centos7安装完毕后重启提示Initial setup of CentOS Linux 7 (core)的解决方法
问题: CentOS7安装完毕,重新开机启动后显示: Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License i ...
- oracle基本操作
登入oraclesqlplus / as sysdba启动oraclestartup停止oracleshutdown 创建新用户create user username identified by p ...
- CAS 4.0.0RC 配置MD5验证功能
配置内容同一样,只是增加一些配置. 因为cas已经默认就支持MD5加密验证,所以只是修改一下配置就可以了. <bean id="primaryAuthenticationHandler ...
- centos yum 安装 mongodb 以及php扩展
centos yum 安装 mongodb 以及php扩展 投稿:hebedich 字体:[增加 减小] 类型:转载 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用 ...
- 练习1-23：删去C语言程序中所有的注释语句（C程序设计语言 第2版）
#include <stdio.h> main() { FILE * fp_i; FILE * fp_o; fp_i = fopen("input.txt", &quo ...
- 微信公众号 扫码支付 模式二 demo
扫码支付 本文附有代码,在下方,如果不熟悉场景的可以看看下面的场景介绍 场景介绍 官网介绍地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?ch ...
- JAVA学习博客---2015-8
八月份的学习博客,今天已经是九月四号了,补上吧.现在我又回到C++了,JAVA的基本的东西都懂了,但是更好的掌握JAVA,我必须原路返回去学习C++,当初为了更快的学JAVA,其实我得C++都是跳着看 ...
- HK一行所见闻
香港一行 20多年来,未未去过HK,前段时间由于工作关系去了趟HK.感触良多. 一清早,福田过关,做火车,做地铁,一通到了目的地. 总结对那边的印象: 1,所有人都是粤语,包括工作交流.而且他们不怎么 ...
- T4模版基础例子
<#@ template debug="false" hostspecific="true" language="C#" #> ...
- 可在广域网部署运行的QQ高仿版 -- GG叽叽V3.6，增加语音消息、语音留言等功能
自从微信出来后,语音消息和语音留言变得非常流行,按下一个键说话,比打字要方便多了.GG在V3.6版本增加了对语音消息和语音留言(或称为离线语音消息)的支持.这两个功能的实现已经很完整,只是比较遗憾的一 ...