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

box不能向下滑动，因为box已经在显示了。

设置display:none你的.boxcss规则，你应该得到你想要的效果。

见演示：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 回答