<jQuery> 十一. 基本动画(显示, 隐藏, 滑入, 滑出, 淡入淡出) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="切换">

<input type="button" value="滑出">
<input type="button" value="滑入">
<input type="button" value="切换">

<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="切换">
<div></div>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {
        // toggle 会根据动画效果来自动切换
        // 显示隐藏
        $("input").eq(0).click(function () {
            $("div").hide(1000);
        })
        $("input").eq(1).click(function () {
            $("div").show(1000);
        })
        $("input").eq(2).click(function () {
            $("div").toggle(1000);
        })

        // 滑入滑出
        $("input").eq(3).click(function () {
            $("div").slideUp(1000);
        })
        $("input").eq(4).click(function () {
            $("div").slideDown(1000);
        })
        $("input").eq(5).click(function () {
            $("div").slideToggle(1000);
        })

        // 淡入淡出
        $("input").eq(6).click(function () {
            $("div").fadeOut(1000);
        })
        $("input").eq(7).click(function () {
            $("div").fadeIn(1000);
        })
        $("input").eq(8).click(function () {
            $("div").fadeToggle(1000);
        })
    })
</script>

</body>
</html>

 

posted @ 2018-01-11 13:34  云淡风轻我爱编程  阅读(955)  评论(0)    收藏  举报