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动画事件的更多相关文章

  1. (21)jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  2. android图片透明度跟缩放大小动画事件

    概序 : 动画事件写在xml中,然后用AnimationUtils去加载动画事件,再监听动画结束事件,隐藏imageview. 1. player_double_click_animation.xml ...

  3. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  4. 关于Animation动画事件的几项测试

    测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...

  5. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  6. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  7. webkitAnimationEnd动画事件

    春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来.继续调整当中…… 这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小 ...

  8. [Unity动画]03.动画事件

    1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...

  9. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

随机推荐

  1. 【转】Java 内存模型及GC原理

    一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...

  2. [原创][下载]Senparc.Weixin.MP-微信公众平台SDK(C#) - 已支持微信6.x API

    因为正在计划做一个微信机器人,需要用ASP.NET,找了一下只有PHP的SDK,没有C#的,于是动手写了一个,已经全面支持微信6.x所有接口,包括多客服.卡券.微信支付等. 微信公众平台地址:http ...

  3. App.config提示错误“配置系统未能初始化”

    解决: "如果配置文件中包含 configSections 元素,则 configSections 元素必须是 configuration 元素的第一个子元素." 所以它前面如果有 ...

  4. POJ 2570

    思路:floyd + 位运算.map[i][j]的二进制位前26位表示i到j路径里面字母a-z的存在情况,为1说明该字母存在,为0不存在. #include<iostream> #incl ...

  5. asp.net 中Session的运用,及抛出错误“未将对象引用设置到对象的实例”

    1. 页面载入后,必须要等到page_Load方法执行建立 page对象后才可以使用Session 2. 在.aspx和.cs文件中使用Session的区别 (1).aspx: Session[&qu ...

  6. cloudstack安装篇2-主机名配置

    CloudStack要求正确配置主机名.在默认情况下,安装完操作系统后,主机名是localhost.localdomain.运行下面的命令来测试: hostname --fqdn 在此处将返回这样的结 ...

  7. Hadoop InputFormat浅析

    本文转载:http://hi.baidu.com/_kouu/item/dc8d727b530f40346dc37cd1 在执行一个Job的时候,Hadoop会将输入数据划分成N个Split,然后启动 ...

  8. Python自动安装第三方类库

    Python在使用过程中会用到大量的第三方库,逐一手工去下载.安装比较繁琐.可以配置第三方镜像源并使用pip进行自动安装.这里推荐选择豆瓣的镜像源:http://pypi.douban.com/sim ...

  9. linux jmail乱码

    在Windows 里面,标题和内容都正常, 在linux里面,--- 1.字符串 more /etc/sysconfig/i18n   export LANG=en_US.UTF-8 ====默认是e ...

  10. Unity3D问题之EnhanceScollView选择角色3D循环滚动效果实现

    需求 呈现3D效果(2D素材)选择角色效果 滚动保证层级.缩放比例.间距正常尾随 循环滚动 这个界面需求一般也会有游戏会採用(貌似有挺多) 怎样实现 实现技术关键点 (3D循环效果,依据数学函数和细致 ...