使用jQuery实现页面元素平滑动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/fengdeweilai/article/details/118943532

上代码吧：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我就是来平滑的</title>

</head>
<body>

<div>
    <input type="button" value="打开动画" onclick="pinghua()">
    <input type="button" value="关闭动画" onclick="close1()">
</div><br>
<div id="first" style="position:absolute;background-color:red;width:300px;height:200px;display:none" class="pinghua">
    <h1>xxx</h1>
    <h1>xxx</h1>
    <h1>xxx</h1>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    function pinghua() {
        console.log("进入界面动画")
        $("#first").css("right", "-300px").animate({"right": "0px"}, 500).show();
    }
    function close1(){
        console.log("执行关闭动画")
        $("#first").animate({"right": "-300px"}, 300).show();
    }
</script>
</body>
</html>