jquery - append prepend after before animate clearQueue stop 

<!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>1</li>
            <li><a href=""></a>2</li>
            <li><a href=""></a>3</li>
            <li><a href=""></a>4</li>
            <li><a href=""></a>5</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:0;
        left:0;
    }

</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'},1500);
    })
    $('.stop').click(function(){
        $('.test1').clearQueue();
        $('.test1').stop();
    })

</script>
</html>

 

posted @ 2016-03-23 15:12  Cynthia娆墨旧染  阅读(309)  评论(0)    收藏  举报