jquery - 当用户在框外单击时，如何创建平滑的边框强调？

Question

当用户在框外单击时，我试图强调一个框（这是一个错误框）。

我一直在尝试使用 jquery 制作动画，然后也尝试使用 css 转换，但它们并没有得到我想要的平滑结果。我只想简单地强调用户重新关注警报。就像任何 Windows 或 Apple 警报一样，您单击警报旁边的某个位置，它会发出声音并强调该框。

一旦用户在外面点击，我尝试transition:border linear 0.2s;然后用 jquery 创建一个边框。

popup = $("#popup");

$(window).on("click", function(e) {
  if (e.target.id != "popup") {
    popup.css("border", "red solid 2px");
    setTimeout(function() {
      popup.css("border", "none");
    }, 250);
  }
})

#popup {
  display: block;
  position: fixed;
  left: 50px;
  top: 50px;
  padding: 20px;
  background-color: black;
  color: white;
  border: white 1px solid;
  transition: border linear 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">Example.</div>

如果有人有一个平稳的解决方案，可以提供柔和的重点或链接到我可以找到方法的地方，那将不胜感激。一如既往，感谢您的任何帮助或建议！

标签： jquerycssborder

Answer 1

我建议使用轮廓而不是边框​​。

popup = $("#popup");

$(window).on("click", function(e) {
  if (e.target.id != "popup") {
    popup.css("outline-width", "10px");
    setTimeout(function() {
      popup.css("outline-width", "inherit");
    }, 250);
  }
})

#popup {
  display: block;
  position: fixed;
  left: 50px;
  top: 50px;
  padding: 20px;
  color: #fff;
  background-color: black;
  outline: solid 0px red;
  transition: outline 0.2s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">Example.</div>