如何通过单击文本字段淡入通知
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">×</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">×</a>
Alert: Please don't do this.
</div>
<textarea id="txt"></textarea>
JS
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">×</a> Alert: Please don't do this.
</div>
<input id="myTextBox" type="text" value="Click here">
相关文章:
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 页面加载跳转jquery淡入
- 使用jquery淡入淡出
- 淡入不带HTML的背景图像
- 淡入淡出脚本不起作用
- 具有淡入淡出效果的全背景图像
- jQuery滑块淡入淡出
- 悬停时淡入背景色
- 在淡入淡出之间淡入淡出
- 有没有一种方法可以从隐藏的可见性(CSS,JS)中获得淡入效果
- jQuery idTabs-使用鼠标悬停自动更改和淡入淡出
- 文本淡入淡出后循环加载页面
- 文本淡入淡出jquery
- 动画文本淡入淡出
- 如何通过单击文本字段淡入通知