<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>