gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:26:41 24 4
gpt4 key购买 nike

我正在尝试为不同的区域设置动画。 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com