<!DOCTYPE html>
<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);
}


</script>

JQ动画的简单介绍的更多相关文章

  1. Rebound动画框架简单介绍

    Rebound动画框架简单介绍 Android菜鸟一枚,有不对的地方希望大家指出,谢谢. 最近在接手了一个老项目,发现里面动画框架用的是facebook中的Rebound框架,由于以前没听说过,放假时 ...

  2. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

  3. 关于JQuery简单介绍

    jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...

  4. jQuery学习----简单介绍，基本使用，操作样式，动画

    jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...

  5. 《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言

    http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn. ...

  6. UIDynamic(简单介绍)

    一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如:重力.弹性碰撞等现 ...

  7. iOS开发——多线程篇——快速生成沙盒目录的路径，多图片下载的原理、SDWebImage框架的简单介绍

    一.快速生成沙盒目录的路径 沙盒目录的各个文件夹功能 - Documents - 需要保存由"应用程序本身"产生的文件或者数据,例如:游戏进度.涂鸦软件的绘图 - 目录中的文件会被 ...

  8. iOS开发拓展篇—UIDynamic(简单介绍)

    iOS开发拓展篇—UIDynamic(简单介绍) 一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟 ...

  9. unity Dotween插件的简单介绍及示例代码

    unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...

随机推荐

  1. css中怎么设置透明度的问题

    小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...

  2. 使用sklearn优雅地进行数据挖掘

    目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...

  3. RTS与CTS的含义

    ====================================我是分割线首先介绍下网上看到的================================================= ...

  4. 产品研发过程中UCD目标的制定与实现

    摘 要:以用户为中心的设计(UCD, User-Centered Design)是保障产品具有较好用户体验(User Experience)的基本活动,其中可用性目标是有效衡量 UCD 活动最终效果的 ...

  5. C++函数返回局部指针变量

    遇到过好几次关于函数返回指针变量问题,有时候是可以的,有时候是不可以的,然后就混乱了.今天研究了下,结果发现原来和内存分配有关. 用下面的例子分析下吧: char * test() { char a[ ...

  6. iOS开发零基础--Swift教程 字典

    字典的介绍 字典允许按照某个键来访问元素 字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合 键集合是不能有重复元素的,而值集合是可以重复的,键和值是成对出现的 Swift中 ...

  7. ButterKnife的原理简述

    ButterKnife的原理简述 注解处理器Java5 中叫APT(Annotation Processing Tool),在Java6开始,规范化为 Pluggable Annotation Pro ...

  8. mysql 条件统计

    问题描述为使讨论简单易懂,我将问题稍作简化,去掉诸多的背景. 从前有一个皇帝,他有50个妃子,这些妃子很没有天理的给他生了100,000个儿子,于是,皇帝很苦恼,海量的儿子很难管理,而且,他想知道每个 ...

  9. BI先特技软件 Analyzer安装时的部分问题

    废话不多,先看第一个问题,我先运行了 Analyzer.3.0.2357b.64.exe 然后就是傻瓜式地下一步 好的,现在问题来了,当我运行安装完毕的Analyzer时,页面给了我这样的提示“ HT ...

  10. iBeacon行为分析

    研究iBeacon也有段时间了, 总结一下这段时间对于ibeaacon行为的分析. iOS 7.0及以后的版本开始支持iBeacon. 硬件方面, iPhone4S 及以后, ipad 3代及以后, ...