jQuery3动画+创建元素

一、jQuery的动画

1、jQuery自带的动画

　　1》变化的是width height opacity display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery动画+创建jQuery变量</title>
    <style>
    div{
        width: 100px;
        height:200px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <div></div>
    <script src="jQuery1-12-4.js"></script>
    <script>
        //第一个动画，变化的是width height opacity display
        $(function () {
           $("button:eq(0)").click(function(){
            //    $("div").show();
                $("div").show(1000);    
           });
           $("button:eq(1)").click(function () {
            //    $("div").hide();
            $("div").hide(100);
           });

$("button:eq(2)").click(function () {

$("div").toggle();

});


        });
    </script>
</body>
</html>

　　2》变化的是height

        //第二个动画，变化的是opacity display
        $(function () {
            $("button:eq(0)").click(function () {
                $("div").slideUp("slow");//卷起 fast normal slow
            });
            $("button:eq(1)").click(function () {
                $("div").slideDown(1000);//放下
            });
            $("button:eq(2)").click(function () {
                $("div").slideToggle(1000);
            });
        });

　　3》淡入淡出

//第三个动画：淡入淡出
        $(function () {
            $("button:eq(0)").click(function () {
                $("div").fadeOut(1000);
            });
            $("button:eq(1)").click(function () {
                $("div").fadeIn(1000);
            });
            $("button:eq(2)").click(function () {
                $("div").fadeToggle(1000);
            });
            $("button:eq(3)").click(function () {
                $("div").fadeTo(1000,0.3);//时间，定值，回调函数
            });
        })

2、自定义动画

 //自定义动画,该方法是异步的，因为底层使用了定时器
        //animation(json,时间,回调函数);
        $(function () {
            $("button:eq(0)").click(function () {
                $("div").animate({
                    "width": 0
                }, 100, function () {
                    alert("运行完成");
                });
            });

        });

二、创建对象

　　1、回顾原生js中是如何创建对象

//原生js中创建对象
        //第一种方式：
        // var p = document.createElement("p");
        // p.innerHTML = "我是一个p";
        // document.getElementsByTagName("div")[0].appendChild(p);
        //第二种方式
        // document.getElementsByTagName("div")[0].innerHTML = "<p>我是第二个p</p>";
        //第三种方式
        document.write("<p>我是第三个P</p>");

　　2、jQuery中创建元素的方式

//jQuery中创建元素的方式
        var $p = $("<p>我是jquery生成的第一个标签</p>");
        //放到div中，在div末尾追加
        // $("div").append($p);//在div的末尾追加p
        // $p.appendTo($("div"));//追加到div,也是在末尾加
        //放在div中，在div的开头追加
        // $("div").prepend($p);//在开头追加
        // $p.prependTo($("div"));//在开头加
        //在div的外边
        // $("div").before($p);//前面
        // $("div").after($p);//后边
        //替换div内部
        $("div").html($p);

　　3、注意：添加的已有元素相当于剪切。

案例：选中左边的，移动到右边，选中右边的，移动到左边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选中移动</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 100px;
        height: 400px;
        background-color: #ccc;
        float: left;
        margin-right: 10px;
        text-align: center;
    }
    button{
        width: 50px;
        height: 50px;
        margin: 10px;
    }
    select{
        width: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <div>
        <p>水果摊</p>
        <select name="" id="sel1" multiple="multiple">
            <option value="">苹果</option>
            <option value="">香蕉</option>
            <option value="">鸭梨</option>
            <option value="">橙子</option>
            <option value="">黄瓜</option>
        </select>
    </div>
    <div>
        <button>></button>
        <button><</button>
        <button>>></button>
        <button><<</button>
    </div>
    <div>
        <p>购物车</p>
        <select name="" id="sel2" multiple="multiple">

        </select>
    </div>
    <script src="jQuery1-12-4.js"></script>
<script>
    $(function () {
        //移动到右边
        $("button:eq(0)").click(function () {
            $("#sel2").append($("#sel1>option:selected"));
        });
        //移动到左边
        $("button:eq(1)").click(function () {
            $("#sel1").append($("#sel2>option:selected"));
        });
        //全部移动到右边
        $("button:eq(2)").click(function () {
            $("#sel1>option").appendTo($("#sel2"));
        });
        //全部移动到左边
        $("button:eq(3)").click(function () {
            $("#sel1").append($("#sel2>option"));
        });
    });
</script>
</body>
</html>

的

jQuery3动画+创建元素

猜你喜欢