jquery - 具有 jQuery 宽度的 CSS 动画仍然可见 0%

我正在尝试为不同的区域设置动画。 View 如下: 有5个区域: A、B、C、D 和 E。

其中 3 个可以一次可见。动画有效，但是当我隐藏必须为 0% 的 2 个区域时，仍然有一条可见的白线。

我尝试用 margin-left: -4px; 修复它，但我认为这不是正确的方法。

在我的示例中，当我关闭 margin-left 时，您可以看到白线。

    $('.EditJob').on('click', function(e) {
      $('.BNone').toggleClass('BGroot BNone');
      $('.CGroot').toggleClass('CKleiner CGroot');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseWorkItemPreview').on('click', function(e) {
      $('.BGroot').toggleClass('BNone BGroot');
      $('.CKleiner').toggleClass('CGroot CKleiner');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

    $('.EditQueueItemPreview').on('click', function(e) {
      $('.AGroot').toggleClass('AKlein AGroot');
      $('.CGroot').toggleClass('CKlein CGroot');
      $('.DNone').toggleClass('DGroot DNone');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseQueueItemPreview').on('click', function(e) {
      $('.AKlein').toggleClass('AGroot AKlein');
      $('.CKlein').toggleClass('CGroot CKlein');
      $('.DGroot').toggleClass('DNone DGroot');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

.AGroot {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.AKlein {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.BGroot {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.BNone {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CGroot {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKlein {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKleiner {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DGroot {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DNone {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.EKlein {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.ENone {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="AGroot">
  <div class="ButtonHide">
    <button class="EditJob">Edit</button>
  </div>
  Area: A
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

<div class="BNone">
  <button class="CloseWorkItemPreview">Close</button>
  Area: B
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="CGroot">
  <div class="ButtonHide">
    <button class="EditQueueItemPreview">Edit</button>
  </div>
  Area: C
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="DNone">
  <button class="CloseQueueItemPreview">Close</button>
  Area: D
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div>

<div class="EKlein">
  Area: E
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

JSFiddle

最佳答案

这是因为您使用的是 display: inline-block;，它会尊重元素之间的空白。

解决此问题的最简单方法是删除 html 中 div 之间的空格。

    $('.EditJob').on('click', function(e) {
      $('.BNone').toggleClass('BGroot BNone');
      $('.CGroot').toggleClass('CKleiner CGroot');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseWorkItemPreview').on('click', function(e) {
      $('.BGroot').toggleClass('BNone BGroot');
      $('.CKleiner').toggleClass('CGroot CKleiner');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

    $('.EditQueueItemPreview').on('click', function(e) {
      $('.AGroot').toggleClass('AKlein AGroot');
      $('.CGroot').toggleClass('CKlein CGroot');
      $('.DNone').toggleClass('DGroot DNone');
      $('.EKlein').toggleClass('ENone EKlein');
      $('.ButtonHide').toggleClass('EditJobHide EditJob');
    });

    $('.CloseQueueItemPreview').on('click', function(e) {
      $('.AKlein').toggleClass('AGroot AKlein');
      $('.CKlein').toggleClass('CGroot CKlein');
      $('.DGroot').toggleClass('DNone DGroot');
      $('.ENone').toggleClass('EKlein ENone');
      $('.ButtonHide').removeClass('EditJobHide');
    });

.AGroot {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.AKlein {
  background-color: #90C3D4;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  transition: 3s width linear;
  white-space: nowrap;
}
.BGroot {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.BNone {
  background-color: #83CCC8;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CGroot {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKlein {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 25%;
  overflow: hidden;
  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.CKleiner {
  background-color: #83CC89;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DGroot {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 60%;
  overflow: hidden;
  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.DNone {
  background-color: #CCC383;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}
.EKlein {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 15%;
  overflow: hidden;
  //  margin-left: -8px;
  transition: 3s width linear;
  white-space: nowrap;
}
.ENone {
  background-color: #CCA983;
  display: inline-block;
  height: 960px;
  width: 0%;
  overflow: hidden;
  //  margin-left: -4px;
  transition: 3s width linear;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="AGroot">
  <div class="ButtonHide">
    <button class="EditJob">Edit</button>
  </div>
  Area: A
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div><div class="BNone">
  <button class="CloseWorkItemPreview">Close</button>
  Area: B
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="CGroot">
  <div class="ButtonHide">
    <button class="EditQueueItemPreview">Edit</button>
  </div>
  Area: C
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="DNone">
  <button class="CloseQueueItemPreview">Close</button>
  Area: D
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>
</div><div class="EKlein">
  Area: E
  <p>
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
  </p>

</div>

JS Fiddle

关于jquery - 具有 jQuery 宽度的 CSS 动画仍然可见 0%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34784276/

jquery - 具有 jQuery 宽度的 CSS 动画仍然可见 0%

上一篇：javascript - 如何在 contenteditable 元素中获取所选元素

下一篇：javascript - 将元素从数组插入到现有 Html 元素的有效方法是什么？