1 html javascript css jquery jquery-slider
我是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已经显示.
设置display:none你的.boxcss规则,你应该得到你想要的效果.
参见演示: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>| 归档时间： |
|
| 查看次数： |
28960 次 |
| 最近记录： |