Question

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

Answer 1

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

在display:none css规则上设置.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>

Answer 2

这是你的解决方案：

http://jsfiddle.net/Rv2ap/

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

您需要做的只是将display: none;添加到.box

的css规则中

Answer 3

你应该隐藏它：

.box {
  display: none;
}

如果您不这样做，则会立即显示框。

Answer 4

当你在前面加上div时会自动显示，所以slideDown无关。

您有两个选择：

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

或在jquery中：

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

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

Jquery滑落不起作用

4 个答案: