1

私はjqueryライブラリにかなり慣れていないので、いくつかのjquery関数を試していました. これは私が書いたコードです

<html>
<head>
<title>slide</title>

    <style>
        .outer  {

            width: 700px;
            height: 1000px;
            border: 2px dashed green;
            margin: 20px;
        }

        .box    {
            widht: 100px;
            height: 80px;
            border: 2px solid green;
            margin: 20px;
        }
    </style>

</head>
<body>
    <input type='button' id='btn' value='click' />
    <div class='outer'></div>
    <script type='text/javascript' src='jquery.js'></script>
    <script>
        $('#btn').click(function()  {
            $('.outer').prepend("<div class='box'></div>");
            $('.box').slideDown(3000);
        });
    </script>
</body>

ご覧のとおり、ボタンをクリックすると、新しい div が親 div の前に追加されます。ただし、jqueryのslideDown関数は効果がないようですが、slideUpを使用すると期待どおりに機能しました。そのため、ボタンをクリックするたびに新しい div が作成されますが、スライドダウン アニメーションは実行されません。何か不足していますか？

4

4 に答える 4

10

boxboxはすでに表示されているため、下にスライドできません。

cssルールを設定display:noneすると、目的の効果が得られるはずです。.box

デモを参照してください：http：//jsfiddle.net/UDj5y/

CSSに変更を加えたくない場合は、代わりに次のjQueryコードを使用できます。

$box = $("<div class='box'></div>");
$('.outer').prepend($box);
$box.hide().slideDown(3000);

デモを参照してください：http：//jsfiddle.net/UDj5y/1/

$('#btn').click(function()  {
    $box = $("<div class='box'></div>");
    $('.outer').prepend($box);
    $box.hide().slideDown(3000);
});
.outer  {

    width: 700px;
    height: 1000px;
    border: 2px dashed green;
    margin: 20px;
}

.box    {
    width: 100px;
    height: 80px;
    border: 2px solid green;
    margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type='button' id='btn' value='click' />
<div class='outer'></div>

于 2012-08-01T09:04:34.770 に答える
2

divを前に付けると、自動的に表示されるため、slideDown何もする必要はありません。

2つのオプションがあります：

.box    {
            widht: 100px;
            height: 80px;
            border: 2px solid green;
            margin: 20px;
            display: none;
        }

またはjqueryで：

$('.box').hide().slideDown(3000);

このフィドルを参照してください：http：//jsfiddle.net/GPhcc/

于 2012-08-01T09:01:56.503 に答える
1

解決策は次のとおりです。

http://jsfiddle.net/Rv2ap/

機能しなかった理由は、ボックスが追加されたときにボックスが表示されていたためです。これは、アニメーションを実行できなかったことを意味します。

あなたがする必要があるのはdisplay: none;、あなたのCSSルールに追加することだけです.box

于 2012-08-01T08:59:10.840 に答える
1

非表示にする必要があります。

.box {
  display: none;
}

そうしないと、ボックスがすぐに表示されます。

于 2012-08-01T09:00:02.963 に答える