我有3个div，它在页面加载时依次淡出，就像在此链接上一样：
http://jsfiddle.net/x4qjscgv/6/但是，我希望用户单击按钮后才能执行淡入淡出功能。我尝试使用以下功能：document.getElementById，但似乎无法正常工作。
请参阅下面的完整代码：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
document.getElementById('btn').onclick = function(e)
</script>
<style>
#chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button>
<div id="chat" class="word1">Word 1</div>
<div id="chat" class="word2">Word 2</div>
<div id="chat" class="word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
</html>
最佳答案
您可以按照我的示例。但是请注意，id只是一个实例，而class可以有许多实例！
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btn").on('click', function(e){
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btnhide").on('click', function(e){
$('.chat').hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
.chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button> <button id="btnhide"> hide divs</button>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>