jquery slideUp() to the left side

Question

Hello,

i will create a weekly calendar. When i switch 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.

Answer 1

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

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

Answer 2

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" });

Answer 3

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