JQuery动画

最新推荐文章于 2024-11-15 11:02:00 发布

原创最新推荐文章于 2024-11-15 11:02:00 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery动画

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="显示" id="btnShow"/>
    <input type="button" value="隐藏" id="btnHide" />
    <input type="button" value="隐藏/隐藏" id="btnShowOrHide" />
    <input type="button" value="下滑显示" id="btnSlideShow" />
    <input type="button" value="上拉隐藏" id="btnUpHide" />
    <input type="button" value="滑动显示/隐藏" id="btnSlideShowOrHide" />
    <input type="button" value="淡入" id="btnFadeIn" />
    <input type="button" value="淡出" id="btnFadeOut" />
    <input type="button" value="淡入/淡出" id="btnFadeInOrOut" />
    <div id="div1" style="width:300px;height:300px;background-color:aqua;display:none"></div>
    <script type="text/javascript">
        $(function () {
            //显示
            $("#btnShow").click(function () {
                $("#div1").show(1000);
            });
            //隐藏
            $("#btnHide").click(function () {
                $("#div1").hide(1000);
            });
            //显示或隐藏
            $("#btnShowOrHide").click(function () {
                $("#div1").toggle(1000);
            });
            //下拉显示
            $("#btnSlideShow").click(function () {
                $("#div1").slideDown(1000);
            });
            //上拉隐藏
            $("#btnUpHide").click(function () {
                $("#div1").slideUp(1000);
            });
            //滑动显示或隐藏
            $("#btnSlideShowOrHide").click(function () {
                $("#div1").slideToggle(1000);
            });
            //淡入
            $("#btnFadeIn").click(function () {
                $("#div1").fadeIn(2000);
            });
            //淡出
            $("#btnFadeOut").click(function () {
                $("#div1").fadeOut(2000);
            });
            //淡入或淡出
            $("#btnFadeInOrOut").click(function () {
                $("#div1").fadeToggle(2000);
            });
        });
    </script>
</body>
</html>