JQ动画事件
1、会飞的li
html:
<ul id="ulL">
<li>中国</li>
<li>美国</li>
<li>德国</li>
<li>俄罗斯</li>
<li>越南</li>
</ul>
<ul id="ulR">
</ul>
jq:
$(function () {
$("li").click(function () {
var $curLi = $(this); //被点击的li jq对象
if ($curLi.parent().attr("id") == "ulL") {
$curLi.css("position", "absolute").animate({ left: "1366px" }, 2000, function () {
$curLi.appendTo($("#ulR")).css("position", "static");
});
}
else {
$curLi.css("position", "absolute").animate({ left: "10px" }, 2000, function () {
$curLi.appendTo($("#ulL")).css("position", "static");
});
}
});
});
2、QQ消息框
html:
<input type="button" value="显示消息" id="showMsg" />
<div id="msgQQ"></div>
jq:
$(function () {
$("#msgQQ").hide();
$("#showMsg").click(function () {
$("#msgQQ").slideDown(2000,close);
});
}); function close() {
setTimeout(function () {
$("#msgQQ").slideUp();
}, 2000); //setTimeout执行一次,setInterval执行多次
}
3、磁力图片
html
<img src="img/cat.jpg" />
jq:
$(document).click(function (jqEvt) {
$("img").animate({ left: jqEvt.pageX, top: jqEvt.pageY }, 2000);
4、伸缩菜单
html
<ul>
<li>政治明星</li>
<li>
<div>
马英九</div>
<div>
普京</div>
<div>
奥巴马</div>
</li>
<li>体育明星</li>
<li>
<div>
姚明</div>
<div>
乔丹</div>
<div>
奥尼尔</div>
</li>
<li>娱乐明星</li>
<li>
<div>
周杰伦</div>
<div>
谢霆锋</div>
<div>
王杰</div>
</li>
<li>IT明星</li>
<li>
<div>
马化腾</div>
<div>
马云</div>
<div>
雷军</div>
</li>
</ul>
jq:
$("li:odd").hide();
$("li:odd").addClass("odd");
$("li:even").toggle(function () {
var strSel = $("li").index($(this));
var iSel = parseInt(strSel);
$("li").eq(iSel + 1).slideDown(1000);
}, function () {
var strSel = $("li").index($(this));
var iSel = parseInt(strSel);
$("li").eq(iSel + 1).slideUp(1000);
});
});
JQ动画事件的更多相关文章
- (21)jq动画
jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...
- android图片透明度跟缩放大小动画事件
概序 : 动画事件写在xml中,然后用AnimationUtils去加载动画事件,再监听动画结束事件,隐藏imageview. 1. player_double_click_animation.xml ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- 关于Animation动画事件的几项测试
测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- webkitAnimationEnd动画事件
春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来.继续调整当中…… 这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小 ...
- [Unity动画]03.动画事件
1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...
- css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...
随机推荐
- 【转】Java 内存模型及GC原理
一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...
- [原创][下载]Senparc.Weixin.MP-微信公众平台SDK(C#) - 已支持微信6.x API
因为正在计划做一个微信机器人,需要用ASP.NET,找了一下只有PHP的SDK,没有C#的,于是动手写了一个,已经全面支持微信6.x所有接口,包括多客服.卡券.微信支付等. 微信公众平台地址:http ...
- App.config提示错误“配置系统未能初始化”
解决: "如果配置文件中包含 configSections 元素,则 configSections 元素必须是 configuration 元素的第一个子元素." 所以它前面如果有 ...
- POJ 2570
思路:floyd + 位运算.map[i][j]的二进制位前26位表示i到j路径里面字母a-z的存在情况,为1说明该字母存在,为0不存在. #include<iostream> #incl ...
- asp.net 中Session的运用,及抛出错误“未将对象引用设置到对象的实例”
1. 页面载入后,必须要等到page_Load方法执行建立 page对象后才可以使用Session 2. 在.aspx和.cs文件中使用Session的区别 (1).aspx: Session[&qu ...
- cloudstack安装篇2-主机名配置
CloudStack要求正确配置主机名.在默认情况下,安装完操作系统后,主机名是localhost.localdomain.运行下面的命令来测试: hostname --fqdn 在此处将返回这样的结 ...
- Hadoop InputFormat浅析
本文转载:http://hi.baidu.com/_kouu/item/dc8d727b530f40346dc37cd1 在执行一个Job的时候,Hadoop会将输入数据划分成N个Split,然后启动 ...
- Python自动安装第三方类库
Python在使用过程中会用到大量的第三方库,逐一手工去下载.安装比较繁琐.可以配置第三方镜像源并使用pip进行自动安装.这里推荐选择豆瓣的镜像源:http://pypi.douban.com/sim ...
- linux jmail乱码
在Windows 里面,标题和内容都正常, 在linux里面,--- 1.字符串 more /etc/sysconfig/i18n export LANG=en_US.UTF-8 ====默认是e ...
- Unity3D问题之EnhanceScollView选择角色3D循环滚动效果实现
需求 呈现3D效果(2D素材)选择角色效果 滚动保证层级.缩放比例.间距正常尾随 循环滚动 这个界面需求一般也会有游戏会採用(貌似有挺多) 怎样实现 实现技术关键点 (3D循环效果,依据数学函数和细致 ...