관리 메뉴

moozi

jquery stop() 본문

TIS_2020/빅데이터2020_1기

jquery stop()

moozi 2020. 10. 26. 09:31

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery - animate()</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script>

        $(document).ready(function(){

           

            $("#box1").animate({

                left:"550"

            },1000).animate({

                top:"550"

            },1000).animate({

                left:"0"

            },1000).animate({

                top:"50"

            },1000);

            

            

            $("#btn1").click(function(){

                $('div').stop();

            });

            $("#btn2").click(function(){

                $('div').stop(true);// clearQueue가 적용.

            });

            $("#btn3").click(function(){

                $('div').stop(false,true);//clearQueue미적용.gotoEnd적용

            });

            $("#btn4").click(function(){

                $('div').stop(true,true);//clearQueue적용.gotoEnd적용

            });

            // $("#box2").delay(5000).animate({

            //     left:"500"

            // },2000);

        });

    </script>

    <style>

        #box1{

            width:300px;

            height:300px;

            backgroundorange;

            positionabsolute;

            top:50px;

            left:10px;

        }

        #box2{

            width:300px;

            height:300px;

            backgroundred;

            positionabsolute;

            top:400px;

            left:10px;

        }

    </style>

</head>

<body>

    <button id="btn1">stop()</button>

    <button id="btn2">stop(true)</button>

    <button id="btn3">stop(false,true)</button>

    <button id="btn4">stop(true,true)</button>

    <div id="box1"></div>

    

    <!-- <div id="box2">jQuery</div> -->

    

</body>

</html>

'TIS_2020 > 빅데이터2020_1기' 카테고리의 다른 글

ajaxdb.php  (0) 2020.10.27
event2.html  (0) 2020.10.26
10/23 layout06.html  (0) 2020.10.23
10/22 layout06  (0) 2020.10.22
jquery layout  (0) 2020.10.22
Comments