Question

我有一个标题，使用jQuery幻灯片在单击图像时从视图中消失。

我试图制作标题＆＃34; slide＆＃34;切换最初激活（隐藏），然后在单击图像后显示，从右侧（而不是从底部）滑入。谢谢你的帮助！

jQuery的：

    $("#slideshow").click(function() {
      $( ".flex-caption" ).toggle( "slide" );
    });

JSFiddle：http://jsfiddle.net/tyuth1sr/1/

Answer 1

.flex-caption {
    ...
    padding-bottom: 100%;
    top: 0px;
    display: none;
}

Demo

Answer 2

通过尝试在标题上设置绝对高度来实现奶酪的一种方式！重要的是。这样，jQuery滑动功能将无法改变高度，使其看起来像是从右边开始。

请参阅http://jsfiddle.net/tyuth1sr/11/

我不得不改变一些类，并且高度很难做出响应的imo。这是我改变的代码：

.bottom {
    bottom: 0;
    margin-bottom: 0px;
    position:absolute;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    width: 295px;
    padding-top: 100%;
    bottom: 20px;
    right:0;
    height:650px !important; /* should be set to height of container - 40 for padding */
}

 <div class="flex-caption ">
    <div class="caption-content bottom">
        <p>Taectur sinti consed magnimp oreptatem que est essi cuptus doluptate pratis rero omni con fugitatius venienimus. Xim fuga. Iliqui omnim comnimus estiorrum cum et accus et liquia nos.</p>
    </div>
</div>

您可以给父级（.flex-slider）一个box-sizing：border-box;然后给予flex-caption 100％的高度！重要;

jQuery幻灯片最初是活动的

2 个答案: