JQuery中的动画(ppt)
<!DOCTYPE html>
<html>
<head>
<title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
//显示
//show()
//$("#pic").show(3000); //fadeIn()
//$("#pic").fadeIn(); //slideDown()
//$("#pic").slideDown();
});
$("#bb").click(function(){
//隐藏
//hide
//$("#pic").hide(3000); //fadeOut()
//$("#pic").fadeOut(); //slideUp
//$("#pic").slideUp();
}); $("#cc").click(function(){
$("#pic").toggle();
}); });
</script>
</head> <body>
<button id="aa">show</button>
<button id="bb">hide</button>
<button id="cc">toggle</button><br>
<img src="../images/6.jpg" name="picture" id="pic" style="display:none">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
$("#pic").animate({left:"+=300px"},3000)
.animate({top:"+=300px",height:"500px"},3000,function(){
$(this).css({opacity:"0.5"});
});
});
$("#bb").click(function(){
//$("#pic").stop(); //暂停当前的,执行下一个动画
//$("#pic").stop(true); //清除队列
//$("#pic").stop(true,true);//直接到达目前动画的末状态
$("#pic").stop(false,true);
});
}); </script>
</head> <body>
<button id="aa">go</button>
<button id="bb">out</button><br>
<img src="../images/6.jpg" name="picture" id="pic" style="position: absolute;">
</body>
</html>
JQuery中的动画(ppt)的更多相关文章
- jQuery学习笔记(四)jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- 第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jQuery笔记(四)jQuery中的动画
jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...
- jQuery中的动画与特效
1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...
- JQuery中的动画
一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...
- 【学习笔记】jQuery中的动画与效果
1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback]) 返回值: ...
- jQuery中的动画与效果
1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback]) 返回值: ...
随机推荐
- ubuntu安装GraphicsMagick
一. sudo apt-get install graphicsmagick 二. http://www.cnblogs.com/cocowool/archive/2010/08/16/1800954 ...
- The 2017 ACM-ICPC Asia East Continent League Final记录
首先感谢tyz学弟的麻麻-给我们弄到了名额- 然后就开始了ACM ECLFinal的玩耍,A*仙人掌可是立了flag要好好打的- 试机赛好像就全是GCJ kickstart的原题,然后AK了但是由于一 ...
- 动态规划:高维DP
例子当然是王八棋这道题,这道题以前是写烂了 先来一个大暴力,zlw教的暴力~~ #include<iostream> using namespace std; ,maxm=; ]; int ...
- python 文件操作 r w a
python基础-文件操作 一.文件操作 对文件操作的流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件时,需要指定文件路径和以何等方式打开文件, ...
- linux基础——磁盘分区和yum安装
第一部分 1) 开启Linux系统前添加一块大小为15G的SCSI硬盘 2) 开启系统,右击桌面,打开终端 3) 为新加的硬盘分区,一个主分区大小为5G,剩余空间给扩展分区,在扩展分区上划分1 ...
- solaris遇到的问题整理总结
solaris遇到的问题整理总结 http://zh888.blog.51cto.com/1684752/454326
- WScript.Shell对象的 run()和exec()函数使用详解
WScript.Shell对象的 run()和exec()函数使用详解 http://blog.sina.com.cn/s/blog_6e14a2050102v47g.html vbScript ...
- C#区分大小写
连属性也是要区分大小写的,如 获取数据长度 错误:strs.length 这样是报错的 正确:strs.Length
- Java常见知识点(二)
21.常量池专门用于管理在编译时被确定并被保存在已编译的.class文件中的一些数据.它包括了关于类.方法.接口中的常量,还包括字符串常量. 22.String已经重写了Object的equals ...
- Centos下yum update与yum upgrade的区别
转载来源于:http://www.cnblogs.com/EasonJim/p/9026357.html 说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作! ...