当前位置 : 主页 > 网页制作 > JQuery >

jQuery宽度的CSS动画仍然可见0％

来源：互联网 收集：自由互联 发布时间：2021-06-15
我试图动画不同的领域.观点如下： 有5个区域： A,B,C,D和E. 其中3个可以一次看到.动画有效但当我隐藏2个必须为0％的区域时,仍有可见的白线. 我尝试用margin-left修复它：-4px;但我不认为这
我试图动画不同的领域.观点如下：
有5个区域：
A,B,C,D和E.

其中3个可以一次看到.动画有效但当我隐藏2个必须为0％的区域时,仍有可见的白线.

我尝试用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 – 如何使用Bxslider连续显示4张幻灯片
下一篇：jquery – Materialize模态覆盖整个页面(模态弹出窗口未被带到前台)
网友评论
相关栏目
最近更新
热门文章