jQuery 幻灯片最初处于活动状态

Question

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

我正在尝试使标题"幻灯片"切换最初处于活动状态（隐藏），然后在单击图像后显示它，从右侧（而不是从底部）滑入。感谢您的帮助！

j查询：

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

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

Answer 1

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

演示

Answer 2

一种方法

是尝试将标题上的绝对高度设置为 ！important。这样，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）提供一个框大小：边框框; 然后给弹性标题一个高度为 100%！重要;