jQuery-初识⑧

jQuery动画

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #showdiv{
            height: 300px;
            background: orange;
            display: none;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        function test() {
            $("#showdiv").show();
        }
    </script>
</head>
<body onload="test()">
    <h3>jQuery动画</h3>
    <div id="showdiv">
    </div>
</body>
</html>

注意：display：none是隐藏效果，也就是orange颜色不能显示。但是在body里加一个onload是表示页面加载的时候出现效果。

这个和不加display：none也不是完全相同可以增加速度

例如：

$("#showdiv").show();在show的（）增加时间：3000

实现页面缓慢加载。。。

还有一些属性：

$("#showdiv").hide(3000);//隐藏效果，前一句show会缓慢加载处理，hide会收回

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #showdiv{
            height: 300px;
            background: orange;
            display: none;
        }
        #div01{
            height: 300px;
            background: green;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        function test() {
            $("#showdiv").show(3000);
            $("#showdiv").hide(3000);
        }
    </script>
</head>
<body onload="test()">
    <h3>jQuery动画</h3>
    <div id="showdiv"></div>
    <div id="div01"></div>
</body>
</html>

还有可以改变show和hide的出场顺序来展示不同效果，注意不同的时间间隔会展现不同效果

function test() {
    $("#showdiv").show(3000);
    $("#div01").hide(3000);
}

function test() {
    $("#showdiv").show(3000);
    $("#div01").hide(3000);
    $("#showdiv").hide(3000);
    $("#div01").show(3000);
}

toggle是切换元素可见状态

$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);

slideDown（）方法：通过高度变化（向下增大）来动态显示所有匹配效果，在显示完成可选的触发一个回调函数

$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);
$("#showdiv").slideDown(3000);

淡入淡出的效果：——最后所有的元素会消失在视野

$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").show().slideUp(3000);
$("#showdiv").fadeOut(3000);

动态操作宽高

现在是以div为例，一般是图片的切换

jQuery动画

猜你喜欢