JQuery笔记(二) animate支持的属性
时间:2022-04-23
本文章向大家介绍JQuery笔记(二) animate支持的属性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$("#aa").toggle(function(){
$("img").animate({top:"330px"},200);
},
function(){
$("img").animate({top:"0px"},200);
}
);
$("#bb").toggle(function(){
$("#div2").animate({background-position:"0 330px"},200);
},
function(){
$("#div2").animate({background-position:"0 0px"},200);
}
)
});
</script>
</head>
<body>
<a id=aa href="#">外部DIV设置为Relative,内部img设置为absolute,对top动画</a> <br><br><br>
<div style="position:relative;display:block;width:403px;height:330px;border:1px solid red;overflow:hidden;"><img src="3.jpg" style="position:absolute;top:0px;" width="403" height="330" /></div>
<p> </p>
<p><a id=bb href="#">背景图片位置动画</a><br>
<br>
</p>
<div id=div2 style="display:block;width:403px;height:330px;border:1px solid red;background-image:url(3.jpg);background-repeat:no-repeat;background-position:0 0px;"></div>
</body>
</html>
- ofbiz实体引擎(八) 创建表
- ofbiz实体引擎(七) 检查数据源
- ofbiz实体引擎(六) GenericHelper的初始化创建
- ofbiz实体引擎(五) ModelGroupReader
- HBitcoin:C#高级比特币钱包库 - 保护您的财产安全
- ofbiz实体引擎(四) ModelReader的作用
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 机器学习实战 | 第五章:模型保存(持久化)
- Python编程任务 | 斯坦福CS231n-深度学习与计算机视觉课程
- ofbiz实体引擎(二) delegator实例化具体方式
- ofbiz实体引擎(一) 获取Delegator
- 12个非常实用的JavaScript小技巧
- 关于PHP浮点数精度损失问题
- FreeMarker与JSP 2.0 + JSTL组合进行比较
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 小白学PyTorch | 9 tensor数据结构与存储结构
- 科研SCI论文图片基础知识详解
- vue3.0的异步更新原理
- 小白学PyTorch | 10 pytorch常见运算详解
- vuex的基础知识点
- 小白学PyTorch | 11 MobileNet详解及PyTorch实现
- 小白学PyTorch | 12 SENet详解及PyTorch实现
- 重拾前端技能为你的职业前程保驾护航
- input切换显示与隐藏,歘~
- 小白学PyTorch | 13 EfficientNet详解及PyTorch实现
- Java 比较两个字符串内容是否相等
- 前端模块化发展史
- 前端性能优化
- 突击并发编程JUC系列-原子更新AtomicLong
- Windows下指定的服务已经标记为删除”