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上查看对错误报告的官方回复