Unable to get div for animation from left to right in jQuery

Question

I have a list that serves as a menu. Every time a user clicks on one of the elements in the list, I want a more detailed div be able to move from left to right.

So, if the user first clicked on the menu item A , A move from left to right. If the user then presses B , A moves from right to left (disappears from the screen) and B goes into slides.

I searched for this problem and found this post . I included the code from jsfiddle , but it did not work. There are no errors in the js log in the Chrome debugging tool. Nothing happens when I click on any item in a menu. What am I doing wrong?

  <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 indicated that my display property for the div part is set to none, so I fixed this by adding the following:

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

right after $('.common').hide() .

Now, when I click on a menu item, I can see the div detail, but it doesn’t enliven.

Update2 . I downloaded jsFiddle , it includes the jquery animation that I successfully use (fadeIn, which is commented out), as well as the code suggested by elchininet.

Answer 1

Not sure if you need it or not

JS Fiddle - Updated 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 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 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> 

Answer 2

Try it with CSS transitions, save a lot of code. This may not be exactly what you want, but I'm sure it will help you in solving your problem.

HTML code

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 

CSS code

 li{ -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } li.open{ -webkit-transform: translateX(100px); -moz-transform: translateX(100px); transform: translateX(100px); } 

JQuery code

 $("li").on("click", function(){ $("li.open").removeClass("open"); $(this).addClass("open"); }); 

jsfiddle

Here you have jsfiddle with modified code and css div animation.

jsfiddle with part of your code.

Answer 3

There are some minor errors that I found on the fiddle like a comma between the class name .: class="project-container,common"

You hide all .common with class .common , but don't show it after. therefore its style property gets display:none even if you add class open to this div .

Here is my updated and running code:

 $(document).ready(function() { itemsToRender = []; $('ul#project_menu li').click(function(e) { $('.common').hide(); menuItemId = (e.currentTarget.id); var projectId = getProjectId(menuItemId); console.log(projectId); $('.project-container.open').removeClass('open'); $(projectId).addClass('open'); $(projectId).show(); /* $(projectId).fadeIn('slow'); <--- THIS WORKS! But I want the slide effect instead */ }); 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'; } else if (menuItemId.indexOf('html5-css3-js') > 0) { return '#html-css-js-project'; } } }); 

 .project-detail { float: right; max-width: 50%; margin-right: 75px; color: #fff; } #php-project { background-color:#9b59b6; margin: 30px; display:none; } #node-project { background-color:#27ae60; margin: 30px; display:none; } .project-container{ transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; } .project-container.open{ transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> </ul> <div class="project-detail"> <div id="php-project" class="project-container common"> <i class="ion-ios-close-empty close-icon js-close-icon"></i> <div classs="project-text"> <h2 class="project-label">Project title: <span class="project-name"> php project</span></h2> </div> </div> <!-- end of php-project --> <div id="node-project" class="project-container common"> <i class="ion-ios-close-empty close-icon js-close-icon"></i> <div classs="project-text"> <h2 class="project-label">Project title: <span class="project-name"> node project</span></h2> </div> </div> <!-- end of node-project --> </div> <!-- end of project-detail --> </div> <!-- end of project --> 

Answer 4

I think you want this to work as in this fiddle

HTML code

  <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"> PHP 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"> Node Project Text <!-- data about project --> </div> <!-- and so on.. --> </div> </div> </div> 

CSS code

 .project_menu > li{ cursor: pointer; } .project-detail{ width: 300px; height: 100px; background-color: #dedede; overflow: hidden; position: relative; } 

JQuery

 $(document).ready(function() { $('.project-detail > div:first-child').css("right","0px"); itemsToRender = []; $('#project_menu li').click(function(e) { menuItemId = (e.currentTarget.id); $('.common').hide(); $(getProjectId(menuItemId)).css('display', 'inline'); var value = '0px'; $(getProjectId(menuItemId)).animate({ right: '0px' }, 800); var req = '.project-detail > div'; $('.project-detail > div').not($(getProjectId(menuItemId))).animate({ right: '300px' }, 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'; } }