I am trying to fadeIn some text which is stored in a variable that I want to show when a button is clicked. The code below works for the showing part but I can't figure out how to make it fadeIn.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Fade in text example</title>
</head>
<body>
<div><button id ="button">Click to show text</button></div><br />
<div id="txtDiv"></div>
<script>
$(document).ready(function(){
var txt = 'Show this stored text.';
$('#button').on('click', function() {
$('#txtDiv').text(txt);
});
});
</script>
</body>
</html>
<script>
$(document).ready(function(){
var txt = 'Show this stored text.';
$('#txtDiv').hide();
$('#button').on('click', function() {
$('#txtDiv').text(txt);
$('#txtDiv').fadeIn( 600 );
});
});
</script>