jquery - append prepend after before animate clearQueue stop

时间：2022-09-15 08:09:55
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery.min.js"></script>

</head>

<style>

    .demo{

        width: 400px;

        height: 400px;

        background: red;

    }

    .test1{

        width: 50px;

        height: 50px;

        background: yellow;

    }

</style>

<body>

    <div class="demo">

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </div>

</body>

<script>

     // after 是在选中元素的后面

    $('.demo').after("<div class='test1'></div>")

    // before是在选中元素的前面

    $('.demo').before("<div class='test1'></div>")

    // append 是在选中元素的内部的所有元素后面

    $('.demo').append("<div class='test1'></div>")

    // prepend是在选中元素的内部的所有元素的前面

    $('.demo').prepend("<div class='test1'></div>")

</script>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery.min.js"></script>

</head>

<style>

    .demo{

        width: 400px;

        height: 400px;

        background: red;

        position: relative;

    }

    .test1{

        width: 50px;

        height: 50px;

        background: yellow;

        position: absolute;

        top:;

        left:;

    }

</style>

<body>

    <input type="button" value="start" class="start">

    <input type="button" value="stop" class="stop">

    <div class="demo">

        <div class="test1"></div>

    </div>

</body>

<script>

    $('.start').click(function(){

        $(".test1").animate({left:'+=200'},);

    })

    $('.stop').click(function(){

        $('.test1').clearQueue();

        $('.test1').stop();

    })

</script>

</html>

相关文章