在一些帮助下,我已经能够让 a div 通过过渡顺利扩展。现在我想反转它,这样当类发生变化时,它不会凭空消失,而是像打开时一样关闭。
我以为我只能检查最小高度,这会导致它反向关闭幻灯片。但这似乎对我不起作用。
我在这里做错了什么?
$(function() {
$('.pp-post-banner-overlay').on('click', function() {
let postFullId = $(this).attr('id');
let postNumId = postFullId.slice(23);
$('.pp-post-container').not('.element-invisible').addClass('element-invisible');
jQuery('#pp-post-container-' + postNumId).removeClass('element-invisible');
});
});
.element-invisible {
position: absolute !important;
max-height: 0px;
width: 100%;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.pp-post-container {
overflow: hidden;
width: 100%;
max-height: 9999px;
min-height: 0px;
-webkit-transition: max-height, min-height, 4s;
-webkit-transition-timing-function: ease-in;
transition: max-height, min-height, 4s;
transition-timing-function: ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pp-post-{post_id}" class="pp-post">
<div id="pp-post-item-{post_id}" class="pp-post-item">
<div id="pp-post-banner-overlay-{post_id}" class="pp-post-banner-overlay"></div>
</div>
</div>
<div id="pp-post-container-{post_id}" class="pp-post-container element-invisible"></div>
最佳答案
这取决于你想如何实现这一目标。 由于您的代码无法正常工作并且您没有提供有效的 jsfiddle,我可以尝试为您提供一些替代方案:
既然你提到类“pp-post-banner-overlay”将把它用作选择器:
点击:
$('.pp-post-banner-overlay').click(function() {
$(this).fadeOut("slow", function() {
$(this).removeClass("desiredClasstoRemove");
});
});
鼠标离开
$('.pp-post-banner-overlay').mouseleave( function() {
$(this).fadeOut("slow", function() {
$(this).removeClass("desiredClasstoRemove");
});
});
使用 CSS: 可以仅使用 css 添加转换。例如应用于所需的选择器:
.pp-post-banner-overlay{
transition: opacity 500 ease-in-out;
}
这是未经测试的。但我猜它应该有效。
安德烈
关于jquery - 转换时缩小 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45837680/