div水平从中心向左滚动

Question

我正在尝试将动画jquery效果应用于具有位于页面中心的类别列表的div。当我点击第一类时，那个初始div应该从中心向左移动，新的div应该从右到左显示。当点击第二类时，第一个div有内容应该向右移动，第二个内容div应该出现。

效果与http://livedemo00.template-help.com/wt_47602/index.html大致相同 我能够使用视口来实现div从右向左移动，但是没有实现从中心到左边的类别列表的div的第一次转换。

谢谢你

JS

var navClick = function() {
    $viewport = $('#viewport');
    $targetElem = $('#content' + $(this).data('target'));
    $active = $viewport.find('.active');
    $active.animate({'right': '-' + $active.width() + 'px'}, function() {
        $(this).removeClass('active');
    });
    $targetElem.animate({'right': '100px'}, function() {
        $(this).addClass('active');
    });
};

$(function() {
   $('nav span').on('click', navClick); 
});

JSFiddle