jquery实现上下左右滑动的方法_jquery

来源：醉满楼美食网

本文实例讲述了jquery实现上下左右滑动的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:

无标题文档

$(document).ready(function(){
$("#btn").unbind().click(function(){
$("#first").hide();

$("#sec").css("left","-200px").animate({"left":"0px"},500).show();
});

$("#btn2").unbind().click(function(){
$("#sec").hide();

$("#first").css("left","200px").animate({"left":"0px"},500).show();
});

$("#btn3").unbind().click(function(){
$("#first").hide();
$("#sec").css("top","200px").animate({"top":"0px"},500).show();
});

$("#btn4").unbind().click(function(){
$("#sec").hide();
$("#first").css("top","-200px").animate({"top":"0px"},500).show();
});
});

第一页

第二页

特别要注意：代码中的position:absolute;一定要加上，否则不会出现效果。

希望本文所述对大家的jQuery程序设计有所帮助。