Javascript Jquery 向下滑动不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11755841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery slidedown not working
提问by Curt
I'm pretty much new to the jquery library, so I was experimenting with some jquery functions. This is the code I wrote
我对 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>
As you see, if i click the button, a new div prepends to the parent div. However the jquery slideDown function doesn't seem to have any effect but when I used slideUp, it worked as expected. So whenever i click the button the new div is created but no slidedown animation takes place. Am I missing something?
如您所见，如果我单击该按钮，则会在父 div 前面添加一个新 div。然而，jquery slideDown 函数似乎没有任何效果，但是当我使用 slideUp 时，它按预期工作。因此，每当我单击按钮时，都会创建新的 div，但不会发生滑动动画。我错过了什么吗？
回答by Curt
boxcannot slide down, because the boxis already being displayed.
box无法向下滑动，因为box已经显示。
Set display:noneon your .boxcss rule, and you should get the effect you are after.
设置display:none你的.boxcss 规则，你应该得到你想要的效果。
See Demo: http://jsfiddle.net/UDj5y/
见演示：http: //jsfiddle.net/UDj5y/
If you don't wish to make changes to your CSS, you can use the following jQuery code instead:
如果您不想更改 CSS，可以使用以下 jQuery 代码：
$box = $("<div class='box'></div>");
$('.outer').prepend($box);
$box.hide().slideDown(3000);
See Demo: http://jsfiddle.net/UDj5y/1/
见演示：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>回答by smilly92
Here's your solution:
这是您的解决方案：
The reason it wasn't working is your box was visible when it was appended. This means the animation could not be run.
它不起作用的原因是您的盒子在附加时可见。这意味着动画无法运行。
All you need to do is add display: none;to your css rules for .box
您需要做的就是添加display: none;到您的 css 规则中.box
回答by Danil Speransky
You should hide it:
你应该隐藏它：
.box {
display: none;
}
If you don't do it, then box will appear immediately.
如果你不这样做，那么框会立即出现。
回答by Tomer
When you prepend the div it is automatically shown, so slideDownhas nothing to do.
当您添加 div 时，它会自动显示，因此slideDown无关紧要。
You have 2 options:
您有 2 个选择：
.box {
widht: 100px;
height: 80px;
border: 2px solid green;
margin: 20px;
display: none;
}
or in jquery:
或在 jquery 中：
$('.box').hide().slideDown(3000);
see this fiddle: http://jsfiddle.net/GPhcc/
看到这个小提琴：http: //jsfiddle.net/GPhcc/
