Jquery 如何检测div是否可见以触发另一个事件（LazyLine Painter）

我已经搜索了几十篇文章，试图找到这个问题的解决方案，但我对jQuery非常陌生，似乎无法找到答案。基本上，我有两个隐藏在页面加载中的元素

<div id="correct" class="hidden">
    <h5> CORRECT! </h5>
</div>

<div id="wrong" class="hidden">
    <h5> NOPE! TRY AGAIN </h5>
</div>

我还使用LazyLine画师绘制svg。当显示#correct div时，我想编辑一个LazyLine选项，以便提高绘图速度。以下是LazyLine的基本代码：

    var $logo = $('#sketch');

      $logo.lazylinepainter({
          'svgData': svgData,
          'strokeWidth': 1,
          'speedMultiplier': 3,
          'delay': 5,
          'strokeColor': '#b5287b',
              'drawSequential': true,
              'ease': 'easeInOutQuad'
      });

      setTimeout(function(){
          $logo.lazylinepainter('paint');
      }, 10)

---

编辑：根据OP的更新，希望在单击按钮之前触发功能（警报），以下操作可能会有所帮助：

$（'#猜测输入'）。在（'keyup'，function（）上{
var answer=‘answer’；
if（$（this）.val（）==答案）{
警报（“hi”）；
}
});
我假设您将它放在$（'#correct'）.show（）之后，并且不需要检查$（'#correct'）.css（'display'）条件。您还可以查看delay（），以确保用户在弹出警报之前看到正确的div

希望这能回答您的问题？
将代码的警告行移到略低于
$（“#correct”）。show（）你会没事的


var-answer=document.getElementById（'guess-input'）.name；
函数猜测答案（）{
$（“button.guess提交”）。单击（函数（事件）{
if（$（“#猜测输入”）.val（）=“答案”）{
$（“#正确”）.show（）；
警报（“hi”）；
$（“#错”）.hide（）；
}否则{
$（“#错”）.show（）；
}
});
}
函数enterSubmit（）{
$（“#猜测输入”）.keyup（函数（事件）{
如果（event.keyCode==13）{
$（“#猜测提交”）。单击（）；
}
});
猜答案（）；
}
输入提交（）
。隐藏{
显示：无；
}

提交
对的
不！再试一次
的可能重复基于您的更新，您可以使用keyup功能在提交功能之前检查是否存在匹配项。请参阅下面编辑的答案。感谢您的回复！所以我意识到我应该把问题说得更清楚一点（我的道歉）。我希望在按钮单击之外显示警报的原因是，当答案正确时，我希望运行另一个停止SVG线条绘制的函数（通过LazyLinePainter）。该警报是一个测试，以查看我是否可以在guessAnswer函数之外检查答案是否正确。
    var $logo = $('#sketch');

      $logo.lazylinepainter({
          'svgData': svgData,
          'strokeWidth': 1,
          'speedMultiplier': 3,
          'delay': 5,
          'strokeColor': '#b5287b',
              'drawSequential': true,
              'ease': 'easeInOutQuad'
      });

      setTimeout(function(){
          $logo.lazylinepainter('paint');
      }, 10)

Below code is enough! you can replace this with your js script.


$( document ).ready(function() {
    $('#correct').hide();
    $('#wrong').hide();
    var answer = document.getElementById('guess-input').name;
  $("button.guess-submit").click(function(event) {
    if ( $('#guess-input').val() == answer) {
      $('#correct').show();
      $('#wrong').hide();
      alert("hi");
    } else {
      $('#wrong').show();
      $('#correct').hide();
    }

  });
});