时间戳

首页 > 解决方案 > Jquery隐藏/显示延迟修复

jquery - Jquery隐藏/显示延迟修复

问题描述

嘿，我在同一个地方有 2 个街区，人们可以在其中输入号码。如果没有数字，它会隐藏。但我想给他们时间将其更改为另一个数字。所以我推迟了与 ms 的隐藏。但随后他们看到了隐藏/显示的动画。有没有办法解决？

$('#FenceMeters').on('input', function() {
  if($('#FenceMeters').val() != "" && Number($('#FenceMeters').val()) >=5){
     $('#testje').show();
     $('#SummaryHTML').hide();
  } else{
    $('#testje').hide(1000);
    $('#SummaryHTML').show();
  }
});

标签： jqueryhtml

解决方案

.hide()将立即使元素不可见，您可以在括号之间添加一个值来指示过渡的持续时间。数值以毫秒为单位.hide(1000)，也可以使用.hide(slow),.hide(fast)等文档

开始倒计时

为了延迟隐藏元素，您需要将代码拆分为两个不同的函数。该命令.setTimeout(hideTestje,1000)在运行hideTestje函数之前开始倒计时，倒计时持续时间为 1000 毫秒（1 秒）。

取消倒计时

如果用户然后继续在文本框中输入，并且该值满足您的两个条件，则该命令.clearTimeout(delayedTestjeHide)将取消倒计时。

var delayedTestjeHide;

$('#FenceMeters').on('input', function() {
  if($('#FenceMeters').val() != "" && Number($('#FenceMeters').val()) >=5){
     $('#testje').show();
     $('#SummaryHTML').hide();
     window.clearTimeout(delayedTestjeHide);
  } else{
      delayedTestjeHide = window.setTimeout(hideTestje,1000);
  }
});


function hideTestje() {      
    $('#testje').hide();
    $('#SummaryHTML').show();
}
#testje {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="FenceMeters">
<div id="testje">testje</div>
<div id="SummaryHTML">SummaryHTML</div>

推荐阅读