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或padding。

Answer 3

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

jQuery动画边框推送元素。怎么阻止它？

3 个答案: