jquery slideUp() to the left side

i will create a weekly calendar. When i sw开发者_开发问答itch the week, i would like to slide the old week to left or right to get the new content. Can anybody help me? At the moment i have no good idea to implement this.

Thank you very much.

You can use Jquery UI slide:

$("#calender").hide("slide", { direction: "left" }, 1000);

Or, if you don't want to include Jquery UI, I would suggest to do something like this:

html

<div id="calendar-wrapper">
   <div id="calendar"></div>
</div>

css

calendar-wrapper { overflow:hidden; position:relative; }
calendar { 
position:absolute; 
width:100px; 
height:100px; 
top:0;
left:-100px;
}

js (jquery)

//to show
$("#calender").animate({"left":"0px"}, 1000);

//to hide
$("#calender").animate({"left":"-" + $("#calender").width() + "px"}, 1000);

You can also use classes instead of specifying the left position in js and then animate that.

I've also seen people animate {"width":"toggle"} but i find that laggy. try it if you want to.

As you can see there are many solutions for what you require. good luck!!

To slide to the left for example instead of .slideUp() you can use .animate() directly, like this:

$(".oldweek").animate({ width: 0 });
//or...
$(".oldweek").animate({ width: "toggle" });

you can use jQuery Cycle plugin to get the desired output... if u having knowledge of jQuery...

http://jquery.malsup.com/cycle/