Jquery向下滑动不起作用答案

【问题标题】：Jquery slidedown not workingJquery向下滑动不起作用
【发布时间】：2012-08-01 08:55:42
【问题描述】：

我对 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，但不会发生下滑动画。我错过了什么吗？

【问题讨论】：

标签： javascript jquery html css jquery-slider

【解决方案1】：

当您添加 div 时，它会自动显示，因此 slideDown 与此无关。

你有两个选择：

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

或在 jquery 中：

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

看到这个小提琴：http://jsfiddle.net/GPhcc/

【讨论】：

不太喜欢这个解决方案。这是隐藏所有框，并且每次都使它们全部向下滑动。

【解决方案2】：

box 无法向下滑动，因为 box 已经在显示中。

在你的.box css 规则上设置display:none，你应该会得到你想要的效果。

查看演示：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>

【讨论】：

【解决方案3】：

这是您的解决方案：

http://jsfiddle.net/Rv2ap/

它不起作用的原因是您的框在附加时可见。这意味着动画无法运行。

您需要做的就是将display: none; 添加到.box 的css 规则中

【讨论】：

【解决方案4】：

你应该隐藏它：

.box {
  display: none;
}

如果你不这样做，那么框会立即出现。

【讨论】：