2012-05-02 3 views
0

データがあるdivが1つあるとします。私はボタンをクリックすると、新しいdivが作成され、シャッターダウンのような実際のdivをカバーすることができます。ここで私は非常に近いが、私が望む方法ではないサイトから得たサンプルコードです。jqueryでスライドを下に移動

$(document).ready(function() { 
    var $box = $('#box') 
    .wrap('<div id="box-outer"></div>'); 
    $('#blind').click(function() { 
    $box.blindToggle('slow'); 
    });  
}); 

だけでサイトにアクセスして、ちょうど私が物事をしたいかを確認するためにブラインドトグルボタンをクリックしてください上記のコードのデモhttp://www.learningjquery.com/2008/02/simple-effects-plugins をご確認ください。 ボタンがクリックされると新しいdivが作成され、新しいdivが実際のdivをスライドダウン効果でカバーし、再度クリックすると新しいdivがup.howをスライドさせてjqueryを使用して実装します。可能であればサンプルコードで案内してください。ありがとう

答えて

1

あなたはかなり多くを提供してきましたリンクはあなたのためにすでにコードを持っています。あなたはちょうどいくつかの微調整が必​​要です。

デモ
http://jsfiddle.net/dACjL/

+0

ありがとう....あなたのコードはかなり近いですが、最初のボタンをクリックすると最初にデータdivをカバーしないボックスdivのように、urコードでビットを変更してください。その後、ボックスdivはスライドしてデータボックスをカバーします"ボタンをもう一度クリックすると、box-divがスライドしてdata-divを開きます。 URコードの変更を行ってください。良いコードをありがとう。 – Thomas

+1

私はここでCSSのビットを変更するので、今は私が望むように動作しています。変更はここのようです

Blind me up. Blind me up. Blind me up.
私は余白を0pxから-120pxに変更します。今私には正しい香りが与えられています。ありがとう – Thomas

2

すでにネイティブ関数.slideUp().slideDown()があります。


アップデート:私はそれを正しく理解しますが、ここではdemoある場合わかりません。

+0

はい私は.Iが試した知っているが、私が欲しいものをシミュレートすることができませんでした。ボタンがクリックされると新しいdivが作成され、新しいdivは実際のdivをスライドダウン効果でカバーし、再度クリックすると新しいdivがスライドします。コードで助けてもらえますか? – Thomas

+0

@Thomas、私はコードを教えてもらえますが、最初にしたいことを教えてください。あなたは、あなたが望むものを示す簡単な絵がありますか? – Starx

+0

ちょうど私は私の質問でここにリンクを与えたサイトに行く。それから私は何が欲しいかを見ることができます。私の場合、新しいdivはスライドダウン効果を持つ私の実際の大きなdivをカバーします。 – Thomas

0

slideUp()およびslideDownの機能を使用します。

$('selector').slideUp()ここでチェックhttp://api.jquery.com/slideUp/

$('selector').slideDown()チェックここhttp://api.jquery.com/slideDown/

+0

私はslideUP()とslideDown()関数を認識しています。 slideUP()やslideDown()などのネイティブ関数を使用して、実際のdivを新しいdivでカバーする方法を説明します。可能であれば、サンプルコードで私に助言することができます。 – Thomas

+0

あなたは 'after()'を使って特定のセレクタの後にその新しいdivを追加しなければなりません。実際のdivをその新しいdivに追加する必要があります。それを試してみてください。 –

関連する問題