.Net Project/Jquery 1.3.2

55장 JQueryEffect 에니메이션 효과 정지 (Stop)

래곤 2009. 11. 12. 14:48
반응형
Stop.htm 
 간단설명)
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>에니메니션 효과 정지 </title>

    <style type="text/css">

        div

        {

            position:absolute;

            background-color:Red;

            left:0px;

            top:30px;

            width:60px;

            height:60px;

            margin:5px;

    </style>

    <style type="text/css">

        .redColor { color:Red;}

    </style>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" 
            type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //start

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

                $(".block").animate({ left: '+=500px', top: '+=500px' }, 2000);

            });

            //Stop

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

                $(".block").stop();

            });

            //Before

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

                $(".block").animate({ left: '-=500px', top: '-=500px' }, 2000);

            });

        });

    </script>

</head>

<body>

    <button id="go">Go</button>

    <button id="stop">STOP!!</button>

    <button id="back">back</button>

    <div class="block">

    </div>

</body>

</html>






반응형