无法让 div 在 jQuery 中从左到右设置动画

Posted 2023-05-08

【中文标题】无法让 div 在 jQuery 中从左到右设置动画

【英文标题】：Unable to get div to animate from left to right in jQuery

【发布时间】：2016-04-08 08:00:22

【问题描述】：

我有一个用作菜单的列表。每次用户点击列表中的一个元素时，我想要一个更详细的div 从左到右滑入。

因此，如果用户首先单击菜单项A，A 从左向右滑动。如果用户随后点击B，A 从右向左滑出（消失在屏幕外），B 滑入。

我搜索了这个问题，发现了这个post。我合并了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建议的代码。

【问题讨论】：

在你的 css 中你有 display:none，它会改变吗？

感谢您的评论！我更新了帖子以反映您的建议。

你有例子吗？图片，jsfiddle？

你不能移动 inline 元素。

@DanielA.White，您的意思是不能为inline 显示的元素设置动画？ jsfiddle.net/Mi_Creativity/cp064nxw

【参考方案1】：

不确定这是不是你需要的

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.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>

【讨论】：

我尝试合并您的代码，但我被卡住了，因为 div 没有正确对齐，所以细节 div 仍然存在，在屏幕的左侧。请看下图：imgur.com/dEMbwQC我已经发布了一个jsFiddle jsfiddle.net/creature_x/vsd76x0c

首先，您的 .sliding-div 看起来太宽，以至于其左侧的某些部分出现在 菜单按钮之后，其次，如果您可以创建一个使用完整的 css 与您的情况相同。

我查看了您的代码并尝试将其合并，但没有成功。这是 JS 小提琴：jsfiddle.net/creature_x/fbyf4nfn。我想我需要更多的咖啡。

好的，我想通了。谢谢（：

【参考方案2】：

尝试使用CSS 转换，将节省大量代码。也许这不是您想要的，但我相信它会帮助您完成任务。

HTML 代码

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

CSS 代码

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 代码

$("li").on("click", function()

    $("li.open").removeClass("open");

    $(this).addClass("open");

);

jsfiddle

这里有一个jsfiddle，修改了你的代码，css 中的 div 动画。

jsfiddle 包含您的部分代码。

【讨论】：

确保将非前缀属性放在前缀版本之前。另见this answer

谢谢@StevenDon。这是我从未做过的练习。每天我都会学到新东西，我会解决它。但是评论说的和你说的完全相反；）

嗨，我尝试合并你的代码，但同样的问题：当我点击菜单项时，div 没有出现。我在开发控制台中没有收到任何错误。我已经上传了一个 js fiddle，里面有你的代码，请看帖子更新（：

嗨@Frosty619，我会试着理解你的代码，我会做一个例子。给我一点时间。

看看可能最后的jsfiddle。不知道是不是你想要的。

【参考方案3】：

我在 fiddle 上发现了一些小错误，例如类名之间的逗号。 ：class="project-container,common"

您隐藏了所有div 和class .common，但之后不显示。所以它的style 属性得到display:none，即使你将class open 添加到div。

这是我更新并运行的代码：

$(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  -->

【参考方案4】：

我认为您希望它像 fiddle 中那样工作

HTML 代码

  <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 代码

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