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的其余部分加载时不可见。

Answer 2

您可以尝试以下方法：

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>

默认情况下我可以隐藏div直到JavaScript调用淡入它吗？

2 个答案: