如何淡入通過單擊文本字段的通知

嗨，大家好，我需要幫助（再次）。我想了解如何在點擊可編輯文本框後使通知或警告框淡入和淡出。如何淡入通過單擊文本字段的通知

這是警告框代碼：

<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功能

來源

2016-11-03 Jane Doe

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') 
});

來源

2016-11-03 03:18:21 Splurtcake

謝謝您的回覆。我不能讓它工作：D我應該在我的onClick函數中插入你的代碼嗎？ –

我剛剛更新了我的示例（和CodePen）以使用較舊類型的JavaScript。我的例子是使用ES6，這可能會解釋爲什麼它不適合你。再次複製並粘貼代碼，並讓我知道它是否有效！ – Splurtcake

另外，不，您不需要將代碼放入onClick函數中。它可以自己生活。 – Splurtcake

我會建議使用CSS的方法來動畫。即點擊添加/刪除一個類，讓css處理動畫。

但是，如果你想使用JavaScript的解決方案，這裏是一個不會改變你的代碼更

var myclickHandler = function() { 
 
\t // 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">

來源

2016-11-03 03:31:34 theCaveat

鑑於Jane Doe正在使用Bootstrap，我認爲你的回答是一個不好的方法，因爲bootstrap具有內置類'fade'＆'in'來處理動畫。而不是通過使用'fadeTo'來處理動畫，只需切換'in'類，這就是我在回答中所做的事情。 – Splurtcake

@Splurtcake我同意。因此，在開始時需要注意「我會推薦使用CSS方法來處理動畫，也就是點擊添加/刪除類並讓css處理動畫。」 – theCaveat

謝謝你的幫助球員 –

如何淡入通過單擊文本字段的通知

回答

相關問題