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>

如果任何人都可以通过一个平滑的解决方案来轻柔地强调自己，或者可以找到可以找到方法的链接，那将不胜感激。与往常一样，感谢您的帮助或建议！

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>

用户单击外部框时如何创建平滑的边框强调？

1 个答案: