我对 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，但不会发生滑动动画。我错过了什么吗？
最佳答案
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>关于javascript - Jquery 滑动不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11755841/