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

Question

为什么这不起作用？ 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>

我尝试过不使用边框简写（边框宽度和边框样式），它实际上不会改变任何内容。

Answer 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