Cover/UnCover a div by another div using jquery animate function
===

suppose my div's are in page look like

    <div id='main'>
        <div id='cover'></div>
        <div id='data'> Here is my sample data</div>
    </div>

now i want to cover my data div by cover div.initially cover div will not be visible. when i will click on button then cover div come from right to left using animate function and cover the data div gradually with fade in effect and when i will click on another button then same way cover div will move on to right from left with fade out effect slowly. i want to achieve this kind of effect. here i am going to post a url from where you can visualize what kind of output i need. in example div cover from top to bottom but in my case div cover from right to left. please help me.
here is the url http://jsfiddle.net/tridip/YdnLd/4/
thnaks