JQuery移动淡入淡出动画

最新推荐文章于 2023-10-14 22:08:28 发布

hangyejiadao

最新推荐文章于 2023-10-14 22:08:28 发布

阅读量794

点赞数

分类专栏： Js HTML5

本文链接：https://blog.csdn.net/hangyejiadao/article/details/63260158

版权

Js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

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