プッシュダウンdivエフェクトを作成するためのJquery

Question

私はこのサイトと同様の機能を構築しようとしています。ここで、「どのように動作する」リンクをクリック上のそれはいくつかのマーケティング材料とのdivを押し下げる：

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

あなたは、私がこの効果のために使用することができますjQueryのについての手掛かりを持っている場合は不思議。

Answer 1

使用jQueryのslideToggle機能

EDIT：jsFiddle

Answer 2

jQueryのUIは、効果の異なる種類を提供し、様々な金融緩和のオプションがあります。ここでは

はそれを行うことができる方法の一例です。あなたはリンクからそれらを試すことができ、私はあなたが "バウンス"効果について話していると思います。それはバウンスされているかのよう

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

Answer 3

スティーブの答えは@に拡張するには、アニメーションを表示させるために.slideToggle()関数呼び出しに緩和の種類を追加することができます。

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

これはjQueryを含む必要ですプラグインを緩和：ここhttp://gsgd.co.uk/sandbox/jquery/easing/

はデモです：http://jsfiddle.net/ANFRD/1/

Answer 4

ここからPrescreenのDan。私はあなたが指しているそのすてきな小さな容器を書くのを助けた。

誰もが正しい軌道に乗っています。かなりシンプルです。ここでは、全体の要素を表示し、隠すために使用される正確なトランジションの設定です：

//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"を持つ親 "container"。次に、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'); 

乾杯、あなたにいくつかの時間を節約し、あなたにいくつかのアイデアを与える希望。