Js slide动画

最新推荐文章于 2025-08-06 12:08:41 发布

原创最新推荐文章于 2025-08-06 12:08:41 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

27 篇文章

订阅专栏

该博客围绕Js的slide动画展开，虽内容缺失，但可推测主要涉及利用Js技术来实现slide动画效果，在前端页面中可带来动态展示的视觉体验。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<script type="text/javascript" src="./jquery-2.1.0.js"></script>
        <style>
          label{
            cursor: pointer;
            width: 30px;
            height: 30px;
            background-color: #ccc;
          }
		  .show{
            width: 300px;
            height: 300px;
            background-color: red;
            display: none;
          }
        </style>
	</head>
	<body>
        <label>点击我</label>  
        <div class="show"></div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("label").click(function(){
                   $(".show").slideToggle(500); //不需要任何标记，直接显示或隐藏
                   //slideUp() slideDown()
                });
            });
        </script>
	</body>
</html>