我正在使用jQuery UI的.hide(‘slide’)动画的一些元素.问题是当我在这些元素上指定一个边距时,动画似乎会下降,一旦完成,就返回原来的位置.如果我从这些元素中删除边距,问题就不复存在了.
I’ve set up a simplified example fiddle showing the problem
CSS
div.score { width: 32px; height: 32px; background-color: blue; color: white; text-align: center; margin: 10px; padding-top: 6px; }
jQuery的
$('div.score').click(function() {
var $this = $(this);
$this.hide('slide',{ direction: 'right' },250,function() {
$this.show('slide',{ direction: 'left' },250)
.text(parseInt($this.text(),10) + 1);
});
});
HTML
<div class="score">0</div> <div class="score">0</div>
有没有人可以解释这是什么原因,是一个bug吗？
解决方法
div.ui-effects-wrapper在动画(jQuery UI)之前包装你的元素div.score.脚本使用outerHeight(true)方法计算其高度,包括边距为
http://api.jquery.com/outerHeight.
所以div.ui-effects-wrapper height是div.score height div.score margin – > 52px
但是您的元素仍然具有边距规则,因此实际的包装高度为52px 20px = 72px.
我认为这是一个错误.
你可以使用这个版本(用简单的包装器)
http://jsfiddle.net/vpetrychuk/s5U38/31/
