如何用jQuery實現以下幻燈片/切換效果？

現在在我的網站，我有以下的JavaScript，顯示和隱藏了如何用jQuery實現以下幻燈片/切換效果？

<div class="commentBox"></div>

當用戶點擊一個

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

全碼：

<script type="text/javascript"> 
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}} 
</script> 

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a> 

<div class="commentBox">Content</div>

效果可以說明如下：

enter image description here

我想修改該功能的行爲不同，但我無法弄清楚。基本上我想要的是展示一旦它開始擴展並且淡化效果的底部的內容。

這是我希望實現：

toggle test 2

任何人都可以提出如何實現幻燈片/切換是在圖像2中所示的效果呢？所以當用戶點擊一個鏈接時就會像這樣展開，當鏈接再次被點擊時它會縮小。

來源

2011-11-03 Ilja

也許這幫助：[我如何執行多個同時jQuery效果？] [1] [1]：http://stackoverflow.com/questions/2344804/how-can-i-execute-multiple-simultaneous-jquery-effects – sascha

不是真的，它不是一次有幾個效果，我的問題更多如何得到它，所以當它下滑它顯示的內容是在底部的第一，看原始函數首先顯示兔子耳朵和一個我想實現顯示兔子尾巴首先））） – Ilja

哦，我很抱歉。你可以把你的兔子放在一個帶有溢出的額外div中：隱藏並且高度爲0px。現在你可以使用bottom：0px;在你的兔子上滑下「額外的div」。那麼第一件事，你會看到兔子的腳。 - 另一種方法：將margin-top設置爲負值，並將其設置爲正值。 – sascha

你描述的效果看起來就像JQuery UI slide effect對我來說（而不是你目前的盲目效果）。這不提供不透明度動畫，但提供了一個非常簡單的解決方案。或者，也許我誤解了你？

（該方法接受的參數滑下，而不是從右到左當然）

$("#test").show("slide", {direction: "up"}, 1000);

JSFiddle here

來源

2011-11-03 11:11:36 njr101

你提供的鏈接與我的第一個例子有相同的效果。看看第一個例子如何首先顯示兔子耳朵，這與您提供的效果完全相同（我現在正在使用它）。但在第二個例子中，你可以看到它首先顯示兔子底部。你能明白我的意思嗎？ – Ilja

默認效果是「盲」，它首先顯示耳朵。如果您將此更改爲「幻燈片」，則首先獲得兔子底部。您可以通過在下拉列表中選擇「幻燈片」在演示頁面上看到此內容。 – njr101

在示例中，它從左到右滑動，我將如何將其更改爲從上到下滑動？ – Ilja

如果只是動畫的背景圖像，像兔子只設置這樣的背景位置：

background-position: 0 100%;

這將使背景與底部邊緣而不是頂部對齊。

對於文本內容，同樣的原則適用。你只需要將內容放在最底層。例如：

<div class="container"> 
    <div class="content"> 
     <p>Text</p> 
    </div> 
</div>

然後使用這個CSS：

.container { 
    position: relative; 
    overflow: hidden; 
} 

.content { 
    position: absolute; 
    bottom: 0; left: 0; 
}

與此唯一的問題是，你需要找到內容的高度，使你知道多少展開容器。

要做到這一點，你可以使用這個jQuery的：

var height = $('.content').outerHeight();

然後在單擊事件只是動畫到正確的高度：

$('.container').animate({ 
    'height': height 
});

希望幫助:)

來源

2011-11-03 11:20:44 will

正如你所說，這隻適用於具有背景圖像的元素。由於他的div類被稱爲「commentBox」，我相信兔子只是一個例子。但不錯的提示！ – sascha

我認爲可能是這樣，所以如果你閱讀我解釋如何與內容。 – will

如何用jQuery實現以下幻燈片/切換效果？

回答

相關問題