Is jQuery resetting the border attribute with animate()?

Why isn't this working? The div has 5px border, on hover, the border should go up to 10 pixels and on mouse out it should go back to 5, but somehow, the border gets reset to 0 and then starts both animations.

Here's my code:

<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开发者_StackOverflow: 10 });
    },
    function(){
        $(this).filter(":not(:animated)").animate({ borderWidth: 5 });
    });
});
</script>
<style>
div{
border:5px solid #ccc;
}
</style>

<div>
Test div
</div>

I've tried without the border shorthand (border-width and border-style) and it actually doesn't change anything.

---

The issue is that borderWidth is a shorthand property for borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth.

The animate method is not working with shorthand properties. You need to use each and all of them.

$(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
        });
    });
});

Demo: http://jsfiddle.net/gaby/ytKeK/

See the official reply to a bug report at http://bugs.jquery.com/ticket/7085