Question

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

const myData = {}

const serializer = fn => data => fn(data)
const flat = data => {}
const deep = data => {}

const flatSerialize = serializer(flat)
const deepSerialize = serializer(deep)

const flatString = flatSerialize(myData)
const deepString = deepSerialize(myData)

Answer 1

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

开始倒计时

为了延迟元素的隐藏，您需要将代码分成两个不同的函数。在运行.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>

jQuery隐藏/显示延迟修复

1 个答案: