[英]Issue with jQuery's slideDown()
检查此代码: http : //jsfiddle.net/ZXN4S/1/
HTML:
<div class="input">
<input type="text" size="50" id="test_input">
<input type="submit" value="send" id="test_submit">
</div>
<ul>
<li class="clear">
<div class="comment">
<div class="image">
<img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
</div>
<div class="info">
<div class="name">Name</div>
<div class="text">text</div>
<div class="timestamp">timestamp</div>
</div>
</div>
</li>
</ul>
jQuery的:
$(document).ready(function() {
$("#test_submit").click(function() {
$.post('/echo/json/', function(data) {
last = $("ul li:first-child");
new_line = last.clone();
new_line.hide();
last.before(new_line);
new_line.slideDown('slow');
});
return false;
});
});
如果您尝试在输入字段中插入一些文本并单击提交,您可以看到我正在谈论的问题。 当它向下滑动时,滑块的高度是错误的,效果很难看。 但是如果删除div info
就可以了。 我该怎么办?
设置:
ul li .info {
float: left;
}
为我做了(用铬测试)
这个技巧似乎解决了这个问题:
ul li .info {
float: right;
width: 485px; // fixed width to the div
}
问题只是布局模型。 您可以添加overflow:hidden以在大多数浏览器中为元素提供布局:
ul li .info {
overflow: hidden;
}
也会解决它。 您也可以选择修改宽度,但这不是必需的。
您实际上没有要求的奖励迂腐帮助:
您正在使用“return false”来阻止默认事件。 有一个功能,在事件如何泡沫方面更有效。 只需将事件传递给函数(您可以使用任何您想要的名称,但为了清楚起见,我将其称为“事件”)然后在其上调用preventDefault()
:
$("#test_submit").click(function(event) {
event.preventDefault()
// ... the rest of your code ... //
});
在JS Fiddle中玩之后,这似乎已经成功了:
在您的CSS中, ul li .info { }
添加: height: 50px;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.