如果对象使用 jQuery 进行动画处理，虚线边框变为实线答案

【问题标题】：Dotted Border turns to solid if object is animated with jQuery如果对象使用 jQuery 进行动画处理，虚线边框变为实线
【发布时间】：2017-01-04 04:38:14
【问题描述】：

我有一个简单的设置：一个图像，然后是一个带有一些隐藏信息的段落，然后在鼠标悬停时向上滑动到图像上。如果我尝试在段落上应用虚线或虚线的边框顶部，它只会变成一条实线。这是修复的已知问题吗？我什至尝试通过 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);
  });
};

});

【问题讨论】：

能否提供代码和CSS？
您也可以发布您的 jQuery 代码（通过编辑您的帖子）吗？

标签： jquery border

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

是的，原来我想要一个与背景颜色相同的 1 像素虚线边框作为一点装饰。我确实尝试过让它变黑但仍然得到相同的结果。

【解决方案3】：

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

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

【讨论】：