Javascript div水平从中心向左滚动

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

效果大致相同 我能够使用viewport实现div从右向左的移动，但没有实现div从中心到左的第一个类别列表转换

谢谢你

JS

---

你能告诉我们你在JSFIDLE中有什么代码[HTML/CSS/JS/JQ]吗？我已经在fidle上上传了代码，你真的在链接JQuery吗？我将它添加到JSFIDLE中并获得了一些功能：是的，我想我没有链接库。我希望在链接库1.10.1后得到与现在一样的效果。我使用aminate.css在jquery中添加了弹跳效果。但是它不能完全工作在jsFIDLE.net/nehab123/Q4nK4/2中/

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