javascript - Unable to get div to animate from left to right in jQuery - Stack Overflow

admin管理员组

文章数量:1417434

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

So if the user was to click menu item A first, A slides from left to right. If the user then clicks B, A slides out from right to left (disappears off screen) and B slides in.

I searched for this problem and found this post. I incorporated the code from the jsfiddle, but it didn't work. No errors are being shown in the js log in Chrome debugging tool. Nothing happens when I click any item from the 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);

        $('mon').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 pointed out that my display property for the detail div was set to none, so I fixed that by adding the following:

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

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

Now, I can see the detail div when I click on the menu item, but it does not animate.

Update2: I have uploaded a jsFiddle, it includes the jquery animation that I am successfully using (fadeIn, which is mented out), as well as the code suggested by elchininet.

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

So if the user was to click menu item A first, A slides from left to right. If the user then clicks B, A slides out from right to left (disappears off screen) and B slides in.

I searched for this problem and found this post. I incorporated the code from the jsfiddle, but it didn't work. No errors are being shown in the js log in Chrome debugging tool. Nothing happens when I click any item from the 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);

        $('.mon').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 pointed out that my display property for the detail div was set to none, so I fixed that by adding the following:

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

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

Now, I can see the detail div when I click on the menu item, but it does not animate.

Update2: I have uploaded a jsFiddle, it includes the jquery animation that I am successfully using (fadeIn, which is mented out), as well as the code suggested by elchininet.

• javascript
• jquery
• html
• css
• jquery-animate

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Jan 4, 2016 at 16:38 Frosty619Frosty619 1,48944 gold badges2424 silver badges3636 bronze badges 9

• 1 In your css you have display:none, does that ever get changed? – user5325596 Commented Jan 4, 2016 at 16:50
• Thank you for your ment! I updated the post to reflect your suggestion. – Frosty619 Commented Jan 4, 2016 at 17:05
• 1 do you have an example? image, jsfiddle? – FlipFloop Commented Jan 4, 2016 at 17:05
• you can't move an inline element. – Daniel A. White Commented Jan 4, 2016 at 17:09
• @DanielA.White, you mean it is not possible to animate inline displayed elements? jsfiddle/Mi_Creativity/cp064nxw – Mi-Creativity Commented Jan 4, 2016 at 17:30

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 3

Not sure if this is what you need 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'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./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>

Try with CSS transitions, will save a lot of code. Maybe this is not exactly that you want but I'm sure it'll helps you with your task.

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 a jsfiddle with your code modified and the div animations in css.

jsfiddle with part of your code.

There are some minor mistakes i found on fiddle like , ma between class name. : class="project-container,mon"

You are hiding all div with class .mon, but not show it after. so its style property get display:none even if you add class open to that div.

Here is my Updated and running code:

$(document).ready(function() {
   
    itemsToRender = [];
    $('ul#project_menu li').click(function(e) {
       
        
         
        $('.mon').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./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  mon">
                      <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  mon">
                      <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  -->

I think you want this to work like 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);

    $('.mon').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';

  }
}

本文标签： javascriptUnable to get div to animate from left to right in jQueryStack Overflow