如何在同時調整div大小時防止div跳躍？

Question

我正在嘗試調整這些div，以便當您單擊其中一個時，其他人變得更小並且變得隱藏，並且被點擊的人佔據了整個寬度。 但是，看起來div被單擊後其餘的div被隱藏起來，達到100％的寬度，使得div在屏幕上跳轉並重新備份。

是否有辦法避免這種情況？ 我是新來的jquery，只是試驗，我已經嘗試了很多不同版本的代碼，但他們都結束了同樣的問題。

<div> 
    <div id="kg-left" class="role-container role-container-left" style="margin-left:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     SOME TEXT 
    </div> 

    <div id="kg-middle" class="role-container role-container-middle"style="margin-left:1%;margin-right:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     MORE TEXT 
    </div> 

    <div id="kg-right" class="role-container role-container-right"style="margin-right:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     EVEN MORE TEXT 
    </div> 
<div> 
<div>rest of html</div> 

最後一個代碼我使用：

var roleContainerLeft = $("#kg-left"); 
var roleContainerMiddle = $("#kg-middle"); 
var roleContainerRight = $("#kg-right"); 

var mainMenu = $("#site-header-menu"); 

var state = 'showAll'; 

roleContainerLeft.click(function(){ 
    if(state == 'showAll') { 
     containerSpacers.slideToggle(2000); 
     roleContainerMiddle.slideToggle(2000); 
     roleContainerRight.slideToggle(
      2000, 
      function(){ 
       roleContainerLeft.css('width', '100%'); 
      } 
     ); 
     mainMenu.fadeTo(2000, 1); 
     state = 'left'; 
    } 
}); 

roleContainerMiddle.click(function(){ 
    if(state == 'showAll') { 
     roleContainerLeft.addClass('shrink'); 
     roleContainerRight.addClass('shrink'); 
     $(".shrink").animate(
      { 
       width: '0%', 
      }, 
      2000, 
      function(){ 
       $(this).hide(); 
      } 
     ); 
     $(".shrink").css('margin', '0%'); 

     roleContainerMiddle.animate(
      { 
       width: '100%', 
      }, 
      2000, 
      function() { 
       roleContainerMiddle.css('width', '100%'); 
      } 
     ); 
     roleContainerMiddle.css('margin', '0%'); 
     mainMenu.fadeTo(2000, 1); 
     state = 'middle'; 
    } 
}); 

roleContainerRight.click(function(){ 
    if(state == 'showAll') { 
     containerSpacers.slideToggle(2000); 
     roleContainerMiddle.slideToggle(2000); 
     roleContainerLeft.slideToggle(
      2000, 
      function(){ 
       roleContainerRight.css('width', '100%'); 
      } 
     ); 
     mainMenu.fadeTo(2000, 1); 
     state = 'right'; 
    } 
}); 

這只是我的最新實驗中，我一直在使用簡單的.slideToggle（）等，但無論我嘗試，我一直具有「跳躍」的問題嘗試。 感謝您的幫助，我一直在敲我的頭靠在牆上2天現在:)

Answer 1

嘗試使用.siblings()降低沒有點擊到7.5%元件width，設置點擊元件width到80%。這應該總共爲95％，爲元素之間的空間留下5％的視口寬度。設置cssdisplay到inline-block，overflow到hidden到元素中剪輯的文字，width設置爲30%均勻空間視口內三個div元素

$("[id^=kg]").click(function() { 
 
    $(this).siblings() 
 
    .animate({ 
 
    width:"7.5%" 
 
    }, 500); 
 
    $(this).animate({ 
 
    width:"80%" 
 
    }, 500) 
 
})

div[id^="kg"] { 
 
    width: 30%; 
 
    height: 138px; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <div id="kg-left" class="role-container role-container-left"> 
 
     SOME TEXT 
 
    </div> 
 

 
    <div id="kg-middle" class="role-container role-container-middle"> 
 
     MORE TEXT 
 
    </div> 
 

 
    <div id="kg-right" class="role-container role-container-right"> 
 
     EVEN MORE TEXT 
 
    </div> 
 
<div> 
 
<div>rest of html</div>

Answer 2

1. 三個div的總寬度超過100％！

寬度（。左）=寬度（.right）=寬度（31％）+填充（1％* 2）+利潤率左（1％）+邊界（1px的* 2）> 35％

寬度（.middle）=寬度（31％）+填充（1％* 2）+裕度（1％* 2）+邊界（1px的* 2）> 35％

所以，在初始狀態的外觀（in chrome）

1. 如何修復跳轉？ 假設你已經修復了上面的寬度問題，你所需要做的就是減少中間最後一個狀態的寬度。例如。

roleContainerMiddle.animate( { width: '90%', // not 100%! Because of border and padding's width! }, 2000, function() { roleContainerMiddle.css('width', '100%'); } );