Javascript Jquery向下滑动不工作_Javascript_Jquery_Html_Css_Jquery Slider

Javascript Jquery向下滑动不工作

javascript jquery html css

Javascript Jquery向下滑动不工作,javascript,jquery,html,css,jquery-slider,Javascript,Jquery,Html,Css,Jquery Slider,我对jquery库非常陌生，所以我在试验一些jquery函数。这是我写的代码 <html> <head> <title>slide</title> <style> .outer { width: 700px; height: 1000px; border: 2px dashed green; margin: 20

我对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>


滑动
.外部{
宽度：700px；
高度：1000px；
边框：2个绿色虚线；
利润率：20px；
}
.盒子{
宽：100px；
高度：80px；
边框：2倍纯绿；
利润率：20px；
}
$（'#btn'）。单击（函数（）{
$（'.outer'）。前缀（“”）；
$（'.box'）。向下滑动（3000）；
});

正如您所看到的，如果我单击按钮，一个新的div会出现在父div之前。但是jquery slideDown函数似乎没有任何效果，但是当我使用slideUp时，它按预期工作。因此，每当我单击按钮时，就会创建新的div，但不会发生向下滑动的动画。我遗漏了什么吗？

以下是您的解决方案：

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

您只需添加

display:none

到您的css规则中的

.box

以下是您的解决方案：

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

您只需添加

display:none

到您的css规则中的

.box

您应该隐藏它：

.box {
  display: none;
}

如果您不这样做，则框将立即出现。

您应该隐藏它：

.box {
  display: none;
}

如果您不这样做，则框将立即出现。

当您预先设置div时，它将自动显示，因此

向下滑动

与此无关

您有两种选择：

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

或者在jquery中：

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

看到这把小提琴：

当你在div前面加上前缀时，它会自动显示出来，所以

向下滑动

与此无关

您有两种选择：

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

或者在jquery中：

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

查看此小提琴：

box

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

框
在.box
css规则中设置display:none
，您将获得所需的效果
请参见演示：

如果不希望更改CSS，可以使用以下jQuery代码：
$box = $("<div class='box'></div>");
$('.outer').prepend($box);
$box.hide().slideDown(3000);

框
无法向下滑动，因为已经显示了框

在.box
css规则中设置display:none
，您将获得所需的效果
请参见演示：

如果不希望更改CSS，可以使用以下jQuery代码：
$box = $("<div class='box'></div>");
$('.outer').prepend($box);
$box.hide().slideDown(3000);


对此解决方案不太感兴趣。这是隐藏所有的盒子，并使它们每次都向下滑动。不太喜欢这个解决方案。这就是隐藏所有的盒子，并使它们每次都向下滑动。