如果对象使用 jQuery 进行动画处理，点状边框将变为实线

Question

我有一个简单的设置：一张图像，然后是一个带有一些隐藏信息的段落，然后在鼠标悬停时在图像上向上滑动。如果我尝试将虚线或点线的顶部边框应用到段落上，它只会变成实线。这是一个已修复的已知问题吗？我什至尝试通过 jQuery 添加虚线边框，但它仍然显示为实线。

HTML：

<div class="wrap">
    <img src="images/fillertxt.jpg" alt="image" />
    <img src="images/filler.jpg" class="front" alt="image" />
    <p class="info">
        This is a short description with a bit of text.
    </p>
</div>

CSS：

.wrap .info {
    width:204px;
    height:50px;
    background:url(images/infobg.jpg) repeat-x #8d9c0c;
    color:#f7f5ef;
    padding:3px;
    position:absolute;
    top:142px;
    left:0;
    border-top:3px dotted #8d9c0c;
}

JS：

$(document).ready(function(){
$("p.info").css("border-top","3px dotted #8d9c0c");
$(function(){
   bindTypeOne();
   $("input[type=radio]").click(function(){
      if ($(this).attr("rel") == "type1"){
         bindTypeOne();
      } else if ($(this).attr("rel") == "type2"){
         bindTypeTwo();
      }
   });
});

function bindTypeOne() { 
 $("div.wrap").hover(function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"141px"}, 400);        
   },function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"0"}, 700);
 });
};

function bindTypeTwo() {
  $("div.wrap").hover(function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"80px","border-top":"3px dotted #8d9c0c"}, 400);        
  },function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"142px"}, 700);
  });
};

});

Answer 1

我认为“border-top”不适用于动画。我知道，要在动画中设置边框宽度，您必须使用 borderWidth 而不是 border-width。所以请尝试同样使用。希望它会有所帮助:)

Answer 2

无法重现您所描述的内容（使用 Opera）。

检查这个简单的演示页面http://jsbin.com/ofoya

请提供一个可以重现您的问题的工作示例。并包含您使用的浏览器的信息。

顺便提一句。您是否知道您将 background-color 和 border-color 设置为相同的颜色代码？尝试将 border-top:3px dotted #8d9c0c; 更改为 border-top:3px dotted #FF0066;

Answer 3

如果您使用 jquery ui，border-top 确实可以工作，但您需要将其更改为“borderTop”。遗憾的是我发现你必须定义每个边界边

$(this).stop().animate({
    backgroundColor: "#000",
    borderRightColor: "#09c",
    borderLeftColor: "#09c",
    borderTopColor: "#09c",
    borderBottomColor: "#09c"
}, "slow");