javascript - 表列 slider 交替

Question

我想创建一个有 4 列的表格，但只显示 3 列。所以我理想情况下有一个跨越 3 列的 div 并应用溢出:隐藏。单击按钮时，我希望第 3 列(公司 2)向左滑动，并替换为第 4 列(公司 3)，以便将公司 3 与公司 1 进行比较。如果再次单击按钮，公司 3 应该再次向左滑动，但公司2应该从右侧滑动，回到原来的位置。这样做的原因是因为在移动 View 中我们无法容纳所有列。

fiddle 可以在这里找到: https://jsfiddle.net/smks/U7JHM/197/

HTML

<div class="div-table">
    <div class="div-table-row header-row">
        <div class="div-table-col header-row">&nbsp;</div>
        <div class="div-table-col header-row">company 1</div>
        <div class="div-table-col header-row">company 2</div>
        <div class="div-table-col header-row">company 3</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col">Comparison 1</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">yyy</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col">Comparison 2</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">www</div>
        <div class="div-table-col">yyy</div>
    </div>
    <div class="divRow">
        <div class="div-table-col">Comparison 3</div>
        <div class="div-table-col">uuu</div>
        <div class="div-table-col">Mkkk</div>
        <div class="div-table-col">yyy</div>
    </div>
</div>
<br>
<button>Compare Next</button>

CSS

.div-table{
  display:table;         
  width:auto;                 
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
  padding: 0;
  text-align: center;
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  padding: 5px;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;  
  border:1px solid  #666666;
  padding: 5px;
}
.header-row {
    height: 50px;
}

Answer 1

这是一种快速而肮脏的方法 - 首先我将类应用到第三列和第四列，然后将第 4 列动画化为隐藏，持续时间为 1，这样它会立即发生。然后，每次按下按钮时，我都会切换第 3 列和第 4 列。

$(document).ready(function () {
    $(".c4").animate({
        width: 'toggle',
        opacity: 'toggle'
    }, 1); 
    $("button").click(function (event) {
        event.preventDefault();
        $(".c3, .c4").animate({
            width: 'toggle',
            opacity: 'toggle'
        });      
    });
});

更新 fiddle :https://jsfiddle.net/U7JHM/202/