JQuery移动淡入淡出动画

来源：互联网发布：淘宝网靠枕编辑：程序博客网时间：2024/05/17 22:33

<!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/demo.css" rel="stylesheet" />    <script src="js/jquery-1.10.2.min.js"></script>    <script src="js/demo.js"></script></head><body>    <div id="d1"></div>    <button id="btn">按钮</button></body></html>

demo.js

/// <reference path="jquery-1.10.2.min.js" />//写jquery的套路 1、页面加载完毕之后 2、找到对象 3、指定相应的事件 4、声明一个事件  5、完成事件里面的内容$(function () {    $("#d1").click(function () {        $(this).animate({ "left": "200px", "top": "200px" }, 2000, function () {            $(this).animate({ "left": "400px", "top": "0px" }, 2000);        });    });    $("#btn").click(function () {        //alert("hello world");        //$("#d1").hide(1000, function () {        //    alert("aaaa");        //});        //$("#d1").show(1000);        // $("#d1").toggle(1000);        //$("#d1").slideUp(1000);        //$("#d1").slideDown(1000);        // $("#d1").slideToggle(1000);        $("#d1").fadeIn(1000);        $("#d1").fadeOut(1000);        $("#d1").fadeToggle(1000);    });});

demo.css

#d1 {    width: 150px;    height: 150px;    border: solid 2px red;    background-color: #00ff21;    position: absolute;    /*display:none;*/}* {    padding: 0px;    margin: 0px;}

0 0

JQuery移动 淡入淡出动画

JQuery移动淡入淡出动画