javascript - jQuery 动画边框插入元素。如何阻止它？

Question

我有一个基于 jQuery 的小脚本，用于在您悬停的图像上设置动画边框。

$(document).ready(function(e) {
    $(".oa-article a img").mouseover(function(e)
    {
        $(this).css('border-style', 'solid');
        $(this).css('border-color', '#C63');
        $(this).animate(
        {
            borderWidth: "5px",
        }, 100, function() 
        {
            // Animation complete.
        });
});


$(".oa-article a img").mouseleave(function(e)
    {
        $(this).animate(
        {
            borderWidth: "0px"
        }, 200, function() 
        {
            // Animation complete.
        });
    });

});

问题是；当该边框动画为 5px 时，它(显然)将这些像素添加到宽度和高度，这会导致它旁边的其他图像链接发生一些不需要的重新定位(这是一个连续有 4 个图像的画廊，等等) ).

我试图对它们进行绝对定位，但这使父/子行为变得乏味，从而使页面无法从图像中增长。问题是，绝对定位使它像我想要的那样工作。边框变大了，并没有影响任何其他图像位置。这就是我想要的:当边框从 0 像素增长到 5 像素时，我不希望其他任何东西以任何方式受此影响。

任何帮助将不胜感激，谢谢!

Answer 1

box-sizing: border-box 使边框包含在宽度/高度中(以便添加边框不会使元素增长):http://jsfiddle.net/8GdZy/1/ .

img {
    box-sizing: border-box;
}​

然后图像本身被缩小。