JQuery移动淡入淡出动画_jquary animation() 淡入淡出

作者：笔触狂放9 | 2024-06-02 01:44:13

踩

jquary animation() 淡入淡出


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/660322

JQuery移动 淡入淡出动画_jquary animation() 淡入淡出

JQuery移动淡入淡出动画_jquary animation() 淡入淡出