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

Question

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

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

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

 <div class="project">
        <ul id="project_menu" class="project_menu">
            <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
            <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> 
            <!-- more code -->
        </ul>
        <div class="project-detail">
            <div id="php-project">
                <i class="ion-ios-close-empty close-icon js-close-icon"></i>
                <div classs="project-text">
                    <!-- data about project -->
                </div>
            </div>
            <div id="node-project">
                <i class="ion-ios-close-empty close-icon js-close-icon"></i>
                <div classs="project-text">
                    <!-- data about project -->
                </div>
            </div>
            <!-- and so on.. -->

#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';

    }          
}

UPDATE1:@ user5325596指出,我对细节的显示属性div设置为无,所以我固定的,加入以下内容:

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

之后$('.common').hide().

现在,当我点击菜单项时,我可以看到细节div,但它没有动画.

Update2:我上传了一个jsFiddle,它包含了我成功使用的jquery动画(fadeIn,已被注释掉),以及elchininet建议的代码.

Answer 1

不确定这是否是您需要的

JS Fiddle -更新 2

// initializing
var prevID = '',
    divs = $('.sliding-divs');

$("li").on("click", function() {
  var theID, theDiv, theDivW, theCenter;
  
  // get the id letter from the li, then pick the corresponding sliding
  // div depending on its value.
  theID = $(this).attr('id');
  theID = theID.replace('li-', '');
  theDiv = $('#div-' + theID);
  
  // get the divs width to slide it into the center of the view
  theDivW = theDiv.width();
  theCenter = $(window).width()/2 - theDivW/2;
  
  // if the user didn't click the link which its slide already 
  // in the view, this to avoid sliding out and in same div.
  if(theID != prevID){
      if (prevID == '') {
    
      // if we don't have a previously slided in div, we just slide 
      // the just click link's div into the view
      theDiv.animate({'left': theCenter}, 1000);
    } else {
    	
      // animated the previous div to the right out of the view, then
      // move all divs to their original position out from the left
      // this is because if we don't do this, an already slided div 
      // will later be slided in from right instead in from left
      // because we have already changed its position.
      // slide the just clicked link's div into the view from left
      $('#div-' + prevID).animate({'left': '110%'}, 800);
      divs.css({'left':-(theDivW + 100)});
      theDiv.animate({'left': theCenter}, 1000);
    }
  }

  // change the value of the id representing previously slided in div
  prevID = theID;
});

body {
  overflow-x: hidden;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  width: 100px;
  height: 25px;
  margin: 2px 0;
  color: white;
  padding: 3px;
  text-align: center;
  background-color: green;
  cursor:pointer;
}

.sliding-divs {
  position: absolute;
  width: 500px;
  line-height: 250px;
  background-color: orange;
  font-size: 30px;
  border: 2px gold solid;
  text-align: center;
  display: inline-block;
  top: 150px;
  left: -510px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li id="li-A">item 1</li>
  <li id="li-B">item 2</li>
  <li id="li-C">item 3</li>
  <li id="li-D">item 4</li>
</ul>
<div class="sliding-divs" id="div-A">
  DIV A
</div>
<div class="sliding-divs" id="div-B">
  DIV B
</div>
<div class="sliding-divs" id="div-C">
  DIV C
</div>
<div class="sliding-divs" id="div-D">
  DIV D
</div>