无法在jQuery中从左到右获取div动画

我有一个列表作为菜单.每次用户点击列表中的某个元素时,我都希望div从左到右更详细地进行滑动.

因此,如果用户首先单击菜单项A,则A从左向右滑动.如果用户然后单击B,则A从右向左滑出(从屏幕上消失)并B滑入.

我搜索了这个问题,发现了这篇文章.我合并了代码jsfiddle,但它没有用.Chrome调试工具中的js日志中未显示任何错误.单击菜单中的任何项目时没有任何反应.我究竟做错了什么？

 

        

            
PHP/MySQL
            
NodeJS
 
            
        
        

            

                
                

                    
                
            
            

                
                

                    
                
            
            

#php-project {
    background-color: #9b59b6;
    margin: 30px;
    display: none;
}

$(document).ready(function() {

    itemsToRender = [];

    $('ul#project_menu li').click(function(e) {

        menuItemId = (e.currentTarget.id);

        $('.common').hide();

        $(getProjectId(menuItemId)).css('display', 'inline');

        var value = $(getProjectId(menuItemId)).css('right') === '100px' ? '-100px' : '100px';
        $(getProjectId(menuItemId)).animate({
            right: value                
        }, 800);

    });
});

function getProjectId(menuItemId) {

    if (menuItemId.indexOf('php') > 0) {

        return '#php-project';

    } else if (menuItemId.indexOf('node') > 0) {

        return '#node-project';

    } else if (menuItemId.indexOf('angular') > 0) {

        return '#angular-project';

    } else if (menuItemId.indexOf('mean') > 0) {

        return '#mean-project';

    }          
}

$(getProjectId(menuItemId)).css('display', 'inline-block');