jQuery：只從右側滑入

我已經想出瞭如何整合jQuery滑動切換功能，使我的標題滑入/滑出圖像，但它從右下角滑入，我希望它只能從右側滑動。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; 
}

來源

2015-01-09 Parker Richard

如果你想使用jQuery toggle()功能，使它們從右側滑動，您將需要使用JQuery UI effects
編輯：
你說你已經使用JQuery用戶界面，因此就使用direction配置：
$('.caption-content').show("slide", { direction: "left" }, 1000);
JQuery UI API on toggle("slide")

來源

2015-01-09 20:57:45

真，我使用這個jQuery UI的效果：HTTP：//api.jqueryui。 com /幻燈片效果/但我仍然不知道如何從右側滑入。 – 2015-01-09 21:01:23

我沒有看到你的小提琴或你的網站上的任何地方的jQuery UI庫。你似乎正在使用標準的jQuery。 jQuery UI功能要求您使用額外的庫。 – Paul 2015-01-09 21:07:17

謝謝你的建議@保羅，你是對的。我加載了我現在完成的jQuery UI庫。現在沒有幻燈片動畫，但它只是在點擊時出現並消失：http：//parkerrichard.com/studiogreen/html/schools-caption-test.html jsFiddle版本似乎工作正常：http://jsfiddle.net/tyuth1sr/16/ – 2015-01-09 21:18:08

jQuery：只從右側滑入

回答

相關問題