jQuery 是否使用 animate() 重置边框属性？

【问题标题】：Is jQuery resetting the border attribute with animate()?jQuery 是否使用 animate() 重置边框属性？
【发布时间】：2010-12-22 18:14:23
【问题描述】：

为什么这不起作用？ div 有 5px 边框，在悬停时，边框应该达到 10 像素，鼠标移开时它应该回到 5，但不知何故，边框被重置为 0，然后开始两个动画。

这是我的代码：

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
    $("div").hover(function(){
        $(this).filter(":not(:animated)").animate({ borderWidth: 10 });
    },
    function(){
        $(this).filter(":not(:animated)").animate({ borderWidth: 5 });
    });
});
</script>
<style>
div{
border:5px solid #ccc;
}
</style>

<div>
Test div
</div>

我试过不使用边框速记（边框宽度和边框样式），它实际上并没有改变任何东西。

【问题讨论】：

我看到here 是动画开始时，它首先将边框设置为0px。是这个意思吗？
是的，我刚刚看到了。这是 jQuery 的功能吗？

标签： javascript jquery html jquery-animate

【解决方案1】：

问题在于borderWidth 是borderLeftWidth、borderRightWidth、borderTopWidth、borderBottomWidth 的简写属性。

animate 方法不适用于速记属性。您需要使用它们。

$(document).ready(function(){
    $("div").hover(function(){
        $(this).filter(":not(:animated)").animate({
            borderLeftWidth: 10,
            borderRightWidth: 10,
            borderTopWidth: 10,
            borderBottomWidth: 10
        });
    },
    function(){
        $(this).filter(":not(:animated)").animate({
            borderLeftWidth: 5,
            borderRightWidth: 5,
            borderTopWidth: 5,
            borderBottomWidth: 5
        });
    });
});

演示：http://jsfiddle.net/gaby/ytKeK/

在http://bugs.jquery.com/ticket/7085查看对错误报告的官方回复

【讨论】：