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