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;
}​

然后对图像本身进行收缩。

Answer 2

或者，您可以为图像提供与背景相同的边框（假设您有纯色背景），然后只设置边框颜色的动画。

这将稍微简化您的功能，并消除在运行中添加magins或填充的需要。

Answer 3

您可以将其设置为负边距：
当边界从0到5px时，使边距从0到-5px