jquery 애니메이션 stop 을 중단 하 는 몇 가지 방법

7793 단어 jquery
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Panel</title>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

body {

    font-size: 13px;

    line-height: 130%;

    padding: 60px

}

#panel {

    width: 60px;

    border: 1px solid #0050D0;

    height: 22px;

    overflow: hidden;

}

.head {

    padding: 5px;

    background: #96E555;

    cursor: pointer;

    width: 300px;

}

.content {

    padding: 10px;

    text-indent: 2em;

    border-top: 1px solid #0050D0;

    display: block;

    width: 280px;

}

</style>

<script src="http://www.cnblogs.com/../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

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

        $("#panel").animate({height:"150" }, 1000).animate({width:"300" },

            1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},

            1000);

    });



    //stop([clearQueue][,gotoEnd]);
  //
    $("button:eq(1)").click(function(){

        $("#panel").stop();//

    });

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

        $("#panel").stop(true);//         

    });

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

        $("#panel").stop(false, true);//

    });

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

        $("#panel").stop(true, true);//

    });



})

</script>

</head>

<body>

<button>       </button>

<button>stop()</button>

<button>stop(true)</button>

<button>stop(false,true)</button>

<button>stop(true,true)</button>



<div id="panel">

    <h5 class="head">   jQuery?</h5>



    <div class="content">

        jQuery  Prototype        JavaScript ,      John Resig    2006 1      。jQuery               ,      JavaScript      HTML  、  DOM、    、       Ajax。               JavaScript                。

    </div>

</div>



</body>

</html>

좋은 웹페이지 즐겨찾기