-2

非表示の div が消えたときにスライドのように追加できますか? divが消えるときにスライドさせたい

このような：

  1. ボタンを押す
  2. 非表示の div がスライドインします
  3. もう一度ボタンを押す
  4. 横にスライドするとdivが消えます

どうやってやるの ？

4

6 に答える 6

1

jQueryを使うことをお勧めします

これは、 jQueryで物事をスライドさせるための優れたチュートリアルです。

于 2013-08-08T12:39:42.830 に答える
1

を使用した非常に簡単な例を次に示しjQueryます。

JSFiddle を確認します。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <!-- Include the jQuery Library -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <!-- Our DOM Structure for the javascript using jQuery -->
        <div id="theDiv">This is a div!</div>
        <button id="myButton">Click Me!</button>
    </body>
</html>

Javascript:

<script type="text/javascript">
// When the page is ready and loaded
$(function(){
    // On click of "myButton"
    $('#myButton').click(function(){
        // "slideToggle" the div
        // ie: If hidden show it, else hide it
        $('#theDiv').slideToggle();
    });
})
</script>

ここでjQueryslideToggleドキュメントを表示

jQuery を使用したことがない場合は、http:
//learn.jquery.com/
http://thenewboston.org/list.php?cat=32 (ビデオ チュートリアル)を確認してください。

于 2013-08-08T12:44:25.630 に答える
0

純粋な JavaScript でこれを行いたい場合は、少しコーディングが必要になるか、jquery を使用してベイクされたアニメーションを使用できます。

http://api.jquery.com/animate/

于 2013-08-08T12:39:35.933 に答える
0

jQuery または別のライブラリで実行できます。独自の関数を作成することもできますが、時間がかかります。

于 2013-08-08T12:38:49.470 に答える
0

jQuery 関数の slideUp()、slideDown()、slideToggle() が役に立ちます。

于 2013-08-08T12:38:53.410 に答える
0

button : これがボタン ID であると仮定します

data : 再生する div

//include jquery

$(document).ready(function(){
 $('#button').click(function(){
  $('#data').toggle('slow',function(){ });
 )};
});
于 2013-08-08T12:51:58.867 に答える