Question

我已经想出如何整合jQuery幻灯片切换功能，让我的标题在我的图片上滑入/滑出，但它从右下角滑入，我希望它只滑动从右侧。

我必须保持段落格式和位置在标题的底部，半透明的白色填充跨越响应图像的整个高度。非常感谢任何帮助！

更新：我似乎已经在这个jsFiddle上工作，但仍然不在网站上。演示：http://jsfiddle.net/tyuth1sr/16/

活动页面：http://parkerrichard.com/studiogreen/html/schools-caption-test.html

jQuery的：

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade"
      });
    });

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

CSS：

/* flexslider styling */

.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

.slides {
    overflow: hidden !important;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.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: 0px;
    display: none;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 100px;
    z-index: 100;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    pointer-events: none;
}

Answer 1

如果您想使用JQuery toggle()功能让它们从右侧滑入，则需要使用JQuery UI effects
修改
您说您已经在使用JQuery UI，所以只需使用direction配置：
$('.caption-content').show("slide", { direction: "left" }, 1000);
JQuery UI API on toggle("slide")

jQuery：只从右侧滑入

1 个答案: