1

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

Iv'e 尝试将 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;
}
4

2 回答 2

4

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

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

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

于 2013-02-16T08:42:13.787 回答
0

You can try this:

function myFunction() {
  var demoDiv = document.getElementById("demo-div");
  demoDiv.classList.remove("hidden");
  demoDiv.classList.add("not-hidden");
}
.hidden {
  display: none;
}

.not-hidden {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
  display: block;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  0% { opacity: 0; }
  25% { opacity: 0.25; }
  50% { opacity: 0.5; }
  75% { opacity: 0.75; }
  100% { opacity: 1; }
}
<button onclick="myFunction()">View Div</button>

<div class="hidden" id="demo-div">
  <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg">
  <p>Ut pharetra sollicitudin lobortis. Mauris viverra eros sed diam tristique ornare. Ut commodo iaculis velit non ullamcorper. Suspendisse ultricies, lectus finibus commodo ultricies, urna nibh porta justo, sit amet ultricies sapien sapien non dui.</p>
</div>

于 2019-02-17T06:16:11.080 回答