Question

在一些帮助下，我已经能够通过转换顺利地扩展div。现在我想要扭转它，这样当班级改变时，它不会消失在空气中，而是在它打开时关闭。

我以为我能够检查最小高度，这会导致它反向滑动关闭。但这似乎对我没用。

我在这里做错了什么？

＆＃13;

$(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');
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这取决于您希望如何实现这一目标。既然你的代码没有工作，而你没有提供一个有用的工作，我可以试着给你一些选择：

因为你提到了“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;
}

这是未经测试的。但是猜它应该有用。

安德烈

过渡时收缩div

1 个答案: