javascript - Jquery $toggle(''slow") 显示闪烁/卡住的行为?
问题描述
问题 .toggle('slow') 转换的行为很奇怪,它在隐藏和显示之前闪烁,可能是由于我的代码设置方式,可能效率不高。
完整详细信息 我有一个基本设置,我根据将要存在的列表数量来显示/隐藏更多/更少列表,因为最终当数据来自后端时,我们不会知道。由于 div 跳跃不是一个好的用户体验,我添加了一个 .toggle('slow') 以便很好地调整高度。但正如您在演示中看到的那样,这显示了一个类似于错误的行为,而隐藏列表正在闪烁。
.product-promotion-display {
background: linear-gradient(90deg, #d4272e 50%, #fff 50%);
overflow: hidden;
transition: height 1s ease;
}
.product-promotion-display ._see-more-li {
list-style: none;
cursor: pointer;
text-decoration: underline;
}
<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="product-promotion-display border">
<div class="container">
<div class="row pt-5">
<div class="col-sm text-white pb-3">
<h1 class="pb-4">Cable Tray - FTE FRP</h1>
<P class="pb-2">Ideal
Ideal for applications that require high strength in high corrosion resistance. The tray system has 2
types: 50
and 80 mm heights that are extremely flexible. </P>
<h5 class="pb-1">Advantages:</h5>
<ul class=" pl-0">
<li class="pb-2 ml-5">
Easy to cut
</li>
<li class="pb-2 ml-5">
No hot work permit required
</li>
<li class="pb-2 ml-5">
Simple hand tools used for cutting and drilling
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
<li class="pb-2 ml-5">
FRP offers a Long Life Cycle
</li>
</ul>
<div class="btn-group pt-2 pb-5">
<button type="button" class="btn btn-outline-light mr-5">Request A Quote</button>
<button type="button" class="btn btn-outline-light">Shop Online</button>
</div>
</div>
<div class="col-sm ppd-img-div align-self-center">
<img src="./images/toolbox.png" alt="there was an image" class="img-fluid">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('ul').each(function () {
var max = 4
if ($(this).find('li').length > max) {
$(this).find('li:gt(' + max + ')').hide().end().append('<li class="_see-more-li pl-0 ml-0 pt-3"><h5 class="_see-more-text">Read More</h5></li>');
$('._see-more-li').click(function () {
$(this).siblings(':gt(' + max + ')').toggle('slow');
if ($('._see-more-text').length) {
$(this).html('<h5 class="show_less">Read Less</h5>');
} else {
$(this).html('<h5 class="_see-more-text">Read More</h5>');
};
});
};
});
})
</script>
</body>
</html>
解决方案
这是因为您将列表项设置为显示:无,当您显示无时,它会隐藏整个项目,因此当您要显示它时,它会首先显示所有项目(填充),然后开始实际的过渡文本。
您应该使用项目的高度,将高度设置为 0 以隐藏它,当您想要显示它时,将其设置为高度:自动。
推荐阅读
- javascript - 活动时按钮中的引导程序 4.x 列表组旋转图标
- jquery - 多项选择应调用单个 Ajax 调用
- c++ - 为什么删除运算符可以在 const 上下文中使用?
- c# - 为什么我不能别名 string[]?
- android - 更改活动 Android Studio - 意图错误
- python-3.x - FileNotFoundError 长文件路径 python - 文件路径超过 255 个字符
- docker - 找不到 docker 运行时问题文件
- python - tf.gather 在使用自定义 softmax_loss 函数时超出范围,即使它不应该
- spring-data-jdbc - 如何使用@Query 查询多个列但不是所有列,但仍使用域数据模型与 Spring Data JDBC 进行映射?
- excel - 桌子自动调节,可以吗?