发表于: 2020-03-05 23:27:43

1 1217


今天完成的事情:今天学习了jQ实现滑动效果和动画效果
明天计划的事情:继续学习后续的部分
遇到的问题:实际操作起来不太熟练需要多加练习
收获:jQuery 滑动方法可使元素上下滑动。

slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。



<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideDown("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,
        #flip {
            padding5px;
            text-aligncenter;
            background-color#e5eecc;
            bordersolid 1px #c3c3c3;
        }

        #panel {
            padding50px;
            displaynone;
        }
    </style>
</head>

<body>

    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>

</body>

</html>

运行结果

点击

有一个滑动的特效

jQuery slideUp() 方法用于向上滑动元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideUp("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,
        #flip {
            padding5px;
            text-aligncenter;
            background-color#e5eecc;
            bordersolid 1px #c3c3c3;
        }

        #panel {
            padding50px;
        }
    </style>
</head>

<body>

    <div id="flip">点我拉起面板</div>
    <div id="panel">Hello world!</div>

</body>

</html>

运行结果

点击

滑动拉上去了

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
    </script>

    <style type="text/css">
        #panel,
        #flip {
            padding5px;
            text-aligncenter;
            background-color#e5eecc;
            bordersolid 1px #c3c3c3;
        }

        #panel {
            padding50px;
            displaynone;
        }
    </style>
</head>

<body>

    <div id="flip">点我,显示或隐藏面板。</div>
    <div id="panel">Hello world!</div>

</body>

</html>

运行结果

点击

再次点击

重新拉上去了、

jQuery 动画 - animate() 方法

用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({ left: '250px' });
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

运行结果

点击开始

元素移动到了右边

更复杂一点

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                });
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

点击之后

元素变大和透明了

animate() - 使用相对值

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '250px',
                    height: '+=150px',
                    width: '+=150px'
                });
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

运行结果

点击

多次点击

元素每次会相对之前变的更大了

明天再继续后面的部分


返回列表 返回列表
评论

    分享到