如何通过单击文本字段淡入通知 - How to Fade In a notification by clicking a text field

How to Fade In a notification by clicking a text field

大家好，我又需要帮助了。我想学习如何在单击可编辑文本框后使通知或警报框淡入和淡出。

这是警告框的代码:

<div class="alert alert-warning fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a>
    Alert: Please don't do this.
</div>

这是onClick的脚本:

function clicks() {
    document.getElementById("notif").innerHTML = "Hello World";
}
</script>

我想我将把div alert box内condition或只是一个脚本与onClick功能

CodePen的工作示例:http://codepen.io/oculusriff/pen/aBoKvE

HTML

<div id="alert" class="alert alert-warning fade">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Alert: Please don't do this.
</div>
<textarea id="txt"></textarea>

var textarea = document.getElementById('txt');
var alert = document.getElementById('alert');
txt.addEventListener('focus', function() {
  alert.classList.add('in');
  setTimeout(function() {
    alert.classList.remove('in');
  }, 2000);
});
txt.addEventListener('blur',function (){
  alert.classList.remove('in')
});

我建议使用CSS方法制作动画。也就是说，点击添加/删除一个类，让CSS来处理动画。

然而，如果你想使用JavaScript解决方案，这里有一个不会改变你的代码太多

var myclickHandler = function() {
	// first show the alert
  $('.alert').show().fadeTo(500, 1);
  
  // Now set a timeout to hide it
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function() {
      $(this).hide();
    });
  }, 3000);
}
// start with the alert hidden
$('.alert').hide();
$('#myTextBox').on('click', myclickHandler)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-warning fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a> Alert: Please don't do this.
</div>
<input id="myTextBox" type="text" value="Click here">