JQuery动画

来源：互联网发布：touchslide.js 编辑：程序博客网时间：2024/06/05 08:49

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="css/demo2.css" rel="stylesheet" />    <script src="js/jquery-1.10.2.min.js"></script>    <script src="js/demo2.js"></script></head><body>    <ul id="u1">        <li>毛泽东</li>        <li>邓小平</li>        <li>江泽民</li>        <li>胡锦涛</li>        <li>习大大</li>        <li>徐老师</li>    </ul>    <ul id="u2"></ul></body></html>

demo2.css

* {    padding: 0px;    margin: 0px;    font-family: "微软雅黑";    list-style-type: none;}ul {    width: 94px;    height: 260px;    border: dashed 2px #0094ff;}li {    margin: 20px;}#u1 {    float: left;}#u2 {    float: right;}

demo2.js

/// <reference path="jquery-1.10.2.min.js" />$(function () {    $("li").click(function () {        if ($(this).parent().attr("id") == "u1")        {                      $(this).css("position", "absolute").animate({ "left": document.body.clientWidth - 20 }, 1000, function () {                $(this).appendTo($("#u2")).css("position", "static");            });        }        else {            $(this).css("position", "absolute").animate({ "left": 20 }, 1000, function () {                $(this).appendTo($("#u1")).css("position", "static");            });        }    });});

0 0