jQuery动画效果之滑入滑出slideDown,slideUp

82550495 2020-02-19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>滑入滑出</title>    <meta charset="UTF-8">    <style type="text/css">        #slideshow,#slidehide,#slidetoggle,#slidetoggle,.content{            text-align: center;            padding: 5px;            background-color: #1ecc86;            color:black;            border: 1px solid red;        }        .content{            display: none;            padding: 50px;        }    </style></head><body><script src="jquery-3.4.1.js"></script><script>    $(document).ready(function () {        $(‘#slidehide‘).click(function () {            $(‘.content‘).slideUp(1000)        });        $(‘#slideshow‘).click(function () {            $(‘.content‘).slideDown(1000)        });        $(‘#slidetoggle‘).click(function () {            $(‘.content‘).toggle(1000);        })    })</script><div id="slideshow">出现</div><div id="slidehide">隐藏</div><div id="slidetoggle">Toggle</div><div class="content">hello star♥</div></body></html>

jQuery动画效果之滑入滑出slideDown,slideUp

 

相关推荐

Web全栈笔记 / 0评论 2020-06-15