Question

我得到了一个徽标列表，这些徽标必须居中，到目前为止一直很好。在访问页面时，我注意到图片在定位时有一个难看的跳跃。所以我决定在这些徽标上方设置一个div，将不透明度从1降低到0 最后将其删除，以便再次点击它们。

在Firefox，Opera等中工作得非常好。但不在IE中。

我切换到了jQuery的完整版。调试器输出如下所示：

if ( set ) {
 style[ name ] = value;
}

这是我使用的代码和html：

jQuery(window).load(function() {
 jQuery(".img_center").each(function(){
  var $li = jQuery(this), $img = $li.find('img');
  $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
 });
 jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
   jQuery(this).remove();
 });
});

HTML：

<li class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/countryclassics.jpg" border="0" alt="" />
 </a>
</li>
<li style="margin:0;" class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/donna.jpg" border="0" alt="" />
 </a>
</li>

的CSS：

.overlay_pic{
 width:inherit;
 height:inherit;
 background:white;
 opacity:1;
 position:absolute;
}

任何想法？：/

编辑：好的，定位是该错误的根源。 padding-top值的计算在正确值和废话宾果之间跳跃。

li height（half）通常 - ＆gt; 80，但有时只是8.这导致padding-top -13px。

那么，胜利的新计算函数？！

EDIT3：好的，f ***关闭动态计算...

解

jQuery(window).load(function() {
var li = "80";
jQuery(".img_center").each(function(){
    var $li = jQuery(this), $img = $li.find('img');
    $img.css('padding-top', (li) - ($img.height() / 2));
});
jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
        jQuery(this).remove();
});

}）;

我将高度设置为静态，不计算。感谢上帝，这不是一个完整的动态ul li盒子......

Answer 1

我怀疑正在发生的事情是你的“身高”计算出现NaN，IE不喜欢你将其设置为“padding-top”的值。 IE通常会将“auto”作为“height”的值返回。您可以尝试将其更改为“innerHeight”，看看它是否有帮助。（编辑现在我认为jQuery“高度”方法应总是给你一个数字......但我仍然认为问题不知何故在于设置那个CSS属性。查看调试器在jQuery中该行的“value”值所说的内容。）

使用未明细化的jQuery进行调试是一个好主意。在调试器中，您可以单击调试器面板右侧的“Locals”选项卡以查看局部变量，并使用“Stack”向上移动堆栈并在外部上下文中查找本地变量。（不幸的是，就我所知，IE调试器不能做的是在外部作用域中显示被捕获为闭包的变量，但在这种情况下这可能不会成为问题。）

再次编辑 - 啊好的，感谢您发布链接。问题是你试图将“padding-top”设置为“-13px”，IE不允许（正确地说是这样）。只需检查“Locals”视图，调试器就可以清楚地看到这一点。为避免这种情况，只需使用Math.max：

$img.css('padding-top', Math.max(0, ($li.height() / 2) - ($img.height() / 2)));

jQuery动画不透明度，删除div并在ie8中获得无效参数错误

1 个答案: