javascript - 我可以默认隐藏一个 div 直到 JavaScript 调用淡入吗？

Question

我的页面上有一个 div，并使用 JavaScript 隐藏它，直到用户单击文本字段。这将淡入 div。我遇到的问题是当页面加载时，div 在页面上快速闪烁然后隐藏。有没有一种方法可以将我的 div 设置为默认隐藏，然后只有在用户单击文本区域时才会出现 div？目前它会在页面加载然后隐藏时闪烁一秒钟。

我试过将 CSS 样式设置为 display:none; 但这意味着 div 根本不会淡入。

<script>
$(".search_prompt").hide();
$(function() {
    $(".search_prompt").hide();
    var focusin_flag = false,
    focusout_flag = false;
    $("#text").focusin(function() {
        if (!focusin_flag) {
            $(".search_prompt").show();
            focusin_flag = true;
        }
    }).focusout(function () {
        if (!focusout_flag ) {
            $(".search_prompt").hide();
            focusout_flag = true;
        } 
        function timeout_init() {
            setTimeout('search_prompt()', 2000);

        }

    });
});        
</script>

这是我的 CSS:

.search_intro {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #181469;
  background-image: url(../img/icons/info-icon.png);
  background-repeat: no-repeat;
  background-position: 12px center;
  border: #CCC 1px solid;
  margin-top: 87px;
  margin-left:460px;
  position: absolute;
  width:198px;
  height:80px;
  background-color:#FFF;
  -moz-box-shadow: 0px 1px 8px #CCC;
  -webkit-box-shadow: 0px 1px 8px #CCC;
  box-shadow: 0px 1px 8px #030303;
  z-index:100;
  display:none;
}

Answer 1

它可能正在闪烁，因为外部 .css 尚未加载。尝试通过内联 css 隐藏它:

<div style="display: none">...</div>

所以最后它在其余的 css 加载时不可见。