jQuery中自定义简单动画的实现
2024-10-13 19:10:23
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义简单动画</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="script/jquery-1.12.2.js"></script>
<style type="text/css">
#panel {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<!-- Date: 2016-03-29 -->
</head>
<body>
<div id="panel"></div>
<script type="text/javascript">
$(function() {
var flag = true;
$("#panel").bind("click", (function() {
if (flag) {
$(this).animate({
left : "500px"
}, 3000);
flag = false;
} else {
$(this).animate({
left : "10px"
}, 3000);
flag = true;
}
}));
});
</script>
</body>
</html>
最新文章
- ffmpeg视频截图命令
- sqlite数据库安装配置
- DDD~我们应该知道的Model,DomainModel和ViewModel
- 在DDwrt下对Firmware操作的一些技巧
- leetcode 126. Word Ladder II ----- java
- 【CentOS】cp显示进度条
- 关于htmlentities 、htmlspecialchars、addslashes的使用
- select into 、 insert into select 、create table as select复制表
- html5画四边形
- BroadcastReceiver监听电量变化
- UVA 1344 Tian Ji -- The Horse Racing
- DataTable中执行DataTable.Select(";条件";),
- POJ3264——Balanced Lineup(线段树)
- jquery倒计时自动跳转
- WINCE 电池状态(C#)
- DHCP协议
- 安装win10操作系统的设备将要突破10亿台
- STM32F103X datasheet学习笔记---USART
- CSS:font-family常用字体中英文对照
- 在Window下编译LibGeotiff(含Libtiff)
热门文章
- 贪心 BZOJ 3671:[Noi2014]随机数生成器
- kafka 消息服务
- Node.js真的有高并发优势吗?看看Node.js和Tomcat的并发测试结果
- 用数组实现栈demo
- 利用组策略禁用Oultook 各个版本的缓存模式!
- 从客户端(content=";<;span class=";Apple-s...";)中检测到有潜在危险的 Request.Form 值。
- linux网络编程学习笔记之五 -----并发机制与线程�
- redis+keeplived分布式缓存
- JAVA中的继承和覆盖
- ubuntu下安装tomcat和配置mysql