JQueryムーブフェードアウトアニメーション

1850 ワード





    
    
    <link href="css/demo.css" rel="stylesheet"/>
    <script src="js/jquery-1.10.2.min.js"/>
    <script src="js/demo.js"/>



    <div id="d1"/>
    <button id="btn">  </button>


</code></pre> 
  <p>demo.js</p> 
   
  <pre><code>/// <reference path="jquery-1.10.2.min.js"/>

// jquery    1、         2、     3、        4、        5、         
$(function () {
    $("#d1").click(function () {
        $(this).animate({ "left": "200px", "top": "200px" }, 2000, function () {
            $(this).animate({ "left": "400px", "top": "0px" }, 2000);
        });
    });
    $("#btn").click(function () {
        //alert("hello world");
        //$("#d1").hide(1000, function () {
        //    alert("aaaa");
        //});
        //$("#d1").show(1000);
        // $("#d1").toggle(1000);
        //$("#d1").slideUp(1000);
        //$("#d1").slideDown(1000);
        // $("#d1").slideToggle(1000);
        $("#d1").fadeIn(1000);
        $("#d1").fadeOut(1000);
        $("#d1").fadeToggle(1000);
    });
});</code></pre>demo.css 
   
  <pre><code>#d1 {
    width: 150px;
    height: 150px;
    border: solid 2px red;
    background-color: #00ff21;
    position: absolute;
    /*display:none;*/
}

* {
    padding: 0px;
    margin: 0px;
}</code></pre> 
  <br/> 
  <br/> 
  <br/> 
 </div> 
</div>
                            </div>
                        </div>