Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet:
$('#scenarioDropdownList').change(function() {
var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
getscenarioDescription(scenarioId);
getData(scenarioId);
});
function getscenarioDescription(scenarioId) {
$.ajax({
type: "GET",
url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
data: {
scenarioId: scenarioId
},
dataType: 'JSON',
success: function(data) {
$.each(data, function(key, val) {
$('#descriptionDisplay').text(val.scenarioDescription);
});
},
error: function() {
}
});
}#descriptionDisplay {
border: solid 1px black;
font-family: "SourceSansPro", Arial, sans-serif;
padding: 10px;
background-color: #EBEBE4;
cursor: not-allowed;
margin-top: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="descriptionArea">
<p id="descriptionDisplay"></p>
</div>In order to achieve the desired effect of fading in the content when a drop down option is selected, the existing functionality needs to be modified. Currently, upon selection, the text is appended correctly but remains visible immediately. The goal is to have the text faded in gradually when a new option is chosen. Any suggestions on how to implement this behavior within the change event?