如何在JavaScript标记中管理CSS Border-top？

Question

如何在JavaScript标记中管理CSS Border-top？

我用这个但是没用

    $(".image").stop().animate({"border-top": '1px solid #ddd' ,"padding-top": '5px' ,height: '10px' ,width: '200px' ,opacity: 1}, 100);

当我尝试padding-top height width opacity它可以工作，但是border-top不起作用，如何使它工作？

Answer 1

http://jsfiddle.net/oxLtk8Ls/

看看，尝试

边框顶部宽度

 $(".image").stop().animate({"border-top-width": '1px' ,"padding-top": '5px' ,height: '10px' ,width: '200px' ,opacity: 1}, 100);

Answer 2

您可能想尝试使用borderTop作为属性规范，而不是' border-top '。

Answer 3

您只能为数字属性设置动画（在您的情况下为border-width ），因此必须使用border-top-width （CSS）或borderTopWidth （DOM）作为键。 如果我没记错的话，要设置边框颜色的动画，就必须使用jQuery UI。

这是因为jQuery不知道如何为其构造CSS字符串。

Answer 4

尝试使用一组jQuery的CSS属性进行动画处理。 除此之外，如果要使用彩色动画，请确保已包含jQuery UI

  $(".image").stop().animate({borderTopWidth: '1px',  
                              borderTopStyle:'solid',
                              borderTopColor:'red', 
                              "padding-top": '5px', 
                              height: '10px', 
                              width: '200px' 
                             ,opacity: 1}, 1000);

这是小提琴