admin管理员组文章数量:1254304
I'm pretty much new to the jquery library, so I was experimenting with some jquery functions. This is the code I wrote
<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?
I'm pretty much new to the jquery library, so I was experimenting with some jquery functions. This is the code I wrote
<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?
Share Improve this question edited Sep 4, 2012 at 7:16 Danil Speransky 30.5k6 gold badges69 silver badges78 bronze badges asked Aug 1, 2012 at 8:55 user1511652user15116524 Answers
Reset to default 10box cannot slide down, because the box is already being displayed.
Set display:none on your .box css rule, and you should get the effect you are after.
See Demo: http://jsfiddle/UDj5y/
If you don't wish to make changes to your CSS, you can use the following jQuery code instead:
$box = $("<div class='box'></div>");
$('.outer').prepend($box);
$box.hide().slideDown(3000);
See Demo: http://jsfiddle/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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='btn' value='click' />
<div class='outer'></div>When you prepend the div it is automatically shown, so slideDown has nothing to do.
You have 2 options:
.box {
widht: 100px;
height: 80px;
border: 2px solid green;
margin: 20px;
display: none;
}
or in jquery:
$('.box').hide().slideDown(3000);
see this fiddle: http://jsfiddle/GPhcc/
Here's your solution:
http://jsfiddle/Rv2ap/
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
You should hide it:
.box {
display: none;
}
If you don't do it, then box will appear immediately.
本文标签： javascriptJquery slidedown not workingStack Overflow
版权声明：本文标题：javascript - Jquery slidedown not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740751668a2280661.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论