Question

我尝试在x秒过后在html元素上显示气球，而不需要用户执行任何操作。我试着像下面的代码示例，但这不会像预期的那样工作。代码只在2000 ms之后启用气球，因此如果用户在此时间之后悬停在元素上，那么他将看到气球。

我的目标是在x秒后显示气球，而无需用户将鼠标悬停在元素上，无论鼠标指向何处，气球都应该显示。

$(document).ready(function() {
  setTimeout(function() {
    $('#myelement').balloon({
      position: "bottom", 
      contents: "Show a message.", 
      css: { color: "red"}
    });
  }, 2000);
});

#myelement {
  border: 1px solid black;
  background-color: #D8D8D8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/urin/jquery.balloon.js/master/jquery.balloon.js"></script>

<div id="myelement">
  <h1>TEST</h1>
</div>

Answer 1

你刚刚在2000ms之后绑定了这个事件。但它只会在将鼠标悬停在元素上后显示工具提示。因此，您首先必须调用您的ballon插件并将事件绑定到元素。如果它已准备就绪，只需触发绑定事件：

$(document).ready(function() {
  // Activate Plugin
  $('#myelement').balloon({position: "bottom", contents: "Show a message.", css: { color: "red"}});

  // Set delay and run event
  setTimeout(function() {
    $('#myelement').trigger('mouseenter');
  }, 2000);
});

在x秒后显示元素气球

1 个答案: