0

这就是我想在下面的小提琴中做的

编辑：我设法通过单击正确隐藏它。但它会立即隐藏起来。有没有让它从屏幕底部滑动的选项？

这是几乎不错的小提琴

下面的老问题：

当单击具有向下滑动效果的另一个元素时，我试图隐藏一个元素，但我遇到了问题。正如您在小提琴上看到的那样，它几乎可以工作，但是有一个剩余的背景，并且当信息向下滑动时，灰色的 X 切换按钮更小。我该如何解决？

这是小提琴 （单击上面带有“X”的灰色字段）

<div id="full-width-slider" class="royalSlider heroSlider rsMinW rsDefault">
  <div class="rsContent">
    <img class="rsImg" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="100" data-move-effect="top" data-speed="200">
      <a href="#" class="infox">X</a>
      <div class="minus7">
      <h4>Nice picture</h4>
      <p>This is the info about it. It´s nice, short and easy to read.</p>
      </div>
    </div>
  </div>


$(document).on("click", ".infox", function() {
    $(".minus7").slideToggle();
});
4

1 回答 1

0

在容器上强制设置宽度可以解决折叠问题，但我不确定它是否完全符合您的要求。

.infoBlock {
    ...
    width: 220px;
}

演示

将空格从容器移动到内部元素会有所帮助，但仍需要改进。

.minus7 {
    ...
    margin-top: 50px;
    margin-bottom: 100px;
}

演示 2

我相信它在 slideToggle 期间移动的原因是因为该left值是从元素高度的中心获取的。随着它变短，该位置移动。将变换原点设置为左下角可以解决此问题。

.infoBlock {
    ...
    transform: rotate(10deg) !important;
}

演示 3

现在我们可以将文本对齐应用到按钮和一些最小高度，我们更接近了：

.infoBlock {
    ...
    min-height: 14px;
}

.infoBlock a {
    ...
    text-align: center;
    padding-top: 4px;
    display: inline-block;
    min-height: 90px;
}

演示 4

然后我们可以切换一个类来控制外部元素的背景可见性：

$('.infoBlock').toggleClass('in out');

.infoBlock {
    ...
    transition: background .75s;
}
.infoBlock.out {
    background: transparent;
}

演示 5

可以通过从段落元素中删除边距并将其应用于标题来解决小滑动抽搐。

演示 6

于 2017-02-23T19:17:43.690 回答