<div style="position:relative;width:100px;height:100px;folat:left;overflow:hidden;"> <div class="trunRight" style="position:absolute;width:200px;height:100px;left:-100px;"> <div class="Theblock" style="background-color:red;width:100px;height:100px; display:none"></div> </div> </div> <div> <input class="moveRight" type="button" value="moveRight" /> <input class="moveLeft" type="button" value="moveLeft" /> </div>
$(‘.moveRight‘).click(function () { // alert(1); $(‘.trunRight‘).delay(500).animate({ left: "0px" }, 500); $(‘.Theblock‘).delay(500).fadeIn(1000); }); $(‘.moveLeft‘).click(function () { // alert(1); $(‘.trunRight‘).delay(500).animate({ left: "-100px" }, 500); $(‘.Theblock‘).delay(500).fadeOut(1000); });
原文:http://my.oschina.net/meng527/blog/518934