jQuery中自定义简单动画的实现
<!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>
jQuery中自定义简单动画的实现的更多相关文章
- jQuery 中的简单动画
制作动画常用方法: show("速度") 显示元素 hide("速度") 隐藏元素 toggle() 切换效果 例如下jQuery代 ...
- jQuery中的经典动画
show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- jQuery中的综合动画
所谓综合动画,就是在链式表达式依次执行相关animate函数,其中的参数是以键值对的方式存在的. 如下示例,就展示了一个基本的综合动画. <!DOCTYPE html PUBLIC " ...
- bootstrap课程7 jquery中结束之前动画用什么
bootstrap课程7 jquery中结束之前动画用什么 一.总结 一句话总结:stop()方法.$('.navs').not($('.navs').eq(idx)).stop().hide(100 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jquery中stop停止动画笔记
jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...
- jQuery中事件与动画的总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是 ...
- JQuery中一个简单的表单验证的实例
html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- winform登录时，在密码框按下回车，直接登陆
//按回车,焦点跳到密码文本框 private void txtUserName_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyCha ...
- Linux企业级开发技术（5）——libevent企业级开发之简介
Libevent是一个用于编写高速可移植非阻塞IO应用的库,它的设计目标是: 可移植性:使用libevent编写的程序应该可以在libevent支持的所有平台上工作.即使没有好的方式进行非阻塞IO,l ...
- Fire Net HDU 1045
简单深搜,可以完全暴力,不会超时的. #include<iostream> #include<cstring> #include<cmath> using name ...
- AndroidStudio SVN检出
版本管理是每个项目的必经之路,很多的ADT都会集成版本管理插件.AS也同样可以集成GITHUB和SVN插件.github对项目有一定的限制,而SVN就比较开放了,所以我们在用AS开发的时候一般用SVN ...
- AC自动机(Aho-Corasick automation)模板 HDU：2222
#include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...
- Rotate List —— LeetCode
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- Unable to load native-hadoop library解决思路
最近试着搭建Hadoop,我使用的操作系统是Centos6.5,Hadoop版本是2.6.0. 在安装过程中总是出现:WARN util.NativeCodeLoader: Unable to loa ...
- python 解析xml 文件: Element Tree 方式
环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...
- 阿里IPO弃港赴美？
最近,关于阿里巴巴和香港联交所博弈的新闻一直长时间占据了各大科技媒体的头条.9月25日,香港联交所行政总裁在港交所其个人专栏“小加网志”中贴出一则名为<投资者保障杂谈>的博客文章,谈及“香 ...
- Android Market 分析【安卓市场】
安卓市场: 通过对表的分析,“下载任务”的数据来源于数据库[app_download],“已安装”的数据来源于数据库[software_installed]. 数据分析:----- bash-3.2# ...