jquery創建一個下推div效果

我想建立一個類似於這個網站的功能。其中，在點擊「如何運作」的鏈接它推下來一個div一些營銷材料：jquery創建一個下推div效果

https://prescreen.com/?ui=logo

，如果你有一個關於一個jQuery，我可以用這個效果線索疑惑。

來源

2012-03-16 Abhi

你究竟在哪裏看到你想要的效果？ – 2012-03-16 22:23:34

點擊頁面上的「工作原理」鏈接：https://prescreen.com/?ui=logo – Abhi 2012-03-16 22:52:36

抱歉，誤讀了您的問題。 slidetoggle會適合你的確。 – 2012-03-16 23:03:29

使用jQuery的slideToggle功能

編輯：

下面是它如何工作的一個示例：jsFiddle

來源

2012-03-16 22:23:39 Steve

它會推動擁有頁面上的所有其他股利。（多數民衆贊成在我想要的效果） – Abhi 2012-03-16 22:51:56

爲了確保其他內容被推下，你只需要確保div有正常的定位（即。不是位置：絕對）。 – 2012-03-16 23:03:05

@Abhi - 隨機問題：你試過了嗎？如果是這樣，你看到了什麼？它有用嗎？ – Steve 2012-03-16 23:05:26

JQuery用戶界面提供了不同類型的效果，並具有各種寬鬆選項。你可以從鏈接中嘗試它們，我想你是在談論「反彈」效應。

http://jqueryui.com/demos/effect/

來源

2012-03-16 23:07:12 tuze

爲了擴大對@史蒂夫的回答，您可以在一個寬鬆類型添加到.slideToggle()函數調用，以使動畫看起來好像是彈跳：

$('.toggledDiv').slideToggle('slow', 'easeOutBounce');

這需要包括了jQuery緩解插件：http://gsgd.co.uk/sandbox/jquery/easing/

這裏是一個演示：http://jsfiddle.net/ANFRD/1/

來源

2012-03-16 23:11:25 Jasper

嘗試'$（ '.toggledDiv'）。stop（）。slideToggle（'slow'，'easeOutBounce'）;'爲了防止惱人的動畫隊列...＃ – Paulooze 2012-03-16 23:24:09

@Paulooze你不得不小心使用'.stop（）'爲您的動畫設定明確的終點。例如，如果向我的代碼中添加'.stop（）'並且幾次點擊非常快，則該元素不會再擴展到其全高，並且實際上可能會顯示爲「已損壞」。你可以通過執行'.stop（）'或通過動畫的實現來解決這個問題。 – Jasper 2012-03-16 23:28:17

的確，謝謝！但是，如果元素不擴展，那麼它會更好，而不是無限制地動畫。用戶仍然可以點擊「正常」，一切都會好的。 – Paulooze 2012-03-16 23:42:43

丹從Prescreen在這裏。我幫助編寫了你指的那個漂亮的小容器。

大家都走在正確的軌道上，這很簡單。下面是我們用來顯示和隱藏整個元素的確切過渡配置：

//show the element 
element.slideDown(1800, 'easeOutBounce'); 

//hide the element (note we sped up the hide to get it out of users way ASAP) 
element.slideUp(800, 'easeOutExpo');

參見：

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

幻燈片功能內被建立第一完成父級「容器」的CSS屬性「overflow：hidden」。然後在id爲「slideTrack」的父包裝中放置一長串幻燈片。我認爲J. Smart最終確定了這一點。這裏的總體思路是：

<style> 
    #container { 
    overflow:hidden; 
    } 
    .slideTrack { 
    width: 10000px; 
    } 
    .slide { 
    position: relative; 
    float: left; 
    } 
    .slide1 { 
    left: 0px; 
    } 
    .slide2 { 
    left: 900px; 
    } 
    .slide3 { 
    left: 1800px; 
    } 
</style> 

<div id="container" style="overflow:hidden"> 
    <div id="slideTrack"> 
    <div class="slide" id="slide1"> slide 1 </div> 
    <div class="slide" id="slide2"> slide 2 </div> 
    <div class="slide" id="slide3"> slide 3 </div> 
    </div> 
</div>

jQuery函數「動畫」，http://api.jquery.com/animate/，使用動畫一個CSS過渡。使用 - =和+ =是一種方便的方法，可以通過增量而不是整個值來更改css值。這裏是我們使用的：

//move right 
$(".slide").animate({ left: '-=900px'}, 1000, 'easeOutExpo'); 
//move left 
$(".slide").animate({ left: '+=900px'}, 1000, 'easeOutExpo');

乾杯，希望能爲您節省一些時間，並給您一些想法。

來源

2012-03-23 04:30:48 drummel

jquery創建一個下推div效果

回答

相關問題