Question

I am working on a web app. This web app has 4 tabs. When the user clicks a tab, I want the content to slide in similar to this site: http://carrotcreative.com.

Is there a recommended jQuery plugin to provide this functionality? I can’t seem to find a good one.

Answer 1

you can do this using simple jquery code. You need put all pages in 2 divs one you will move using animate and the outer one will be used as mask so you will not have scrollbars

<ul id="nav">
  <li>page1</li>
  <li>page2</li>
</ul>


<div class="mask">
  <div class="container">
    <div class="page">
    </div>
    <div class="page">
    </div>
  </div>
</div>

.mask { overflow: hidden; }
.page { float: left; }

and then using animate

$container = $('.container');
$pages = $container.find('.page');
$('#nav li').each(function(i) {
  $(this).click(function() {
     $container.stop().animate('margin-left', -$pages.eq(i).offest().left);
  });
});

this should work but I didn’t test it.