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); }); });

 

转载于:https://www.cnblogs.com/ruanmou001/p/3520717.html