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

上的错误报告的官方回复

jQuery是否使用animate（）重置border属性？

1 个答案: