如何在更改事件上添加fadeIn Jquery答案

【问题标题】：How to add fadeIn Jquery on a change event如何在更改事件上添加fadeIn Jquery
【发布时间】：2020-05-05 03:46:05
【问题描述】：

我有一个<div>，里面有一个<p> 元素。我正在进行 AJAX 调用，然后将返回的数据附加到段落中。我希望 <p> 标签和所有相关的 CSS 在 change 事件中淡入。到目前为止，这是我的代码：

$('#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>

可以看出，我有一个当前处于更改事件中的函数，该函数在下拉列表中选择所选选项的当前场景 ID。然后将其作为参数传递给 AJAX 调用，该调用与过滤数据的 Web API 接口。然后返回数据，我目前将其附加到<p> 标签。这一切都正常工作。

但是我想实现它，以便当用户更改选定的下拉选项时，文本会附加到标签（目前是这样），但它也会淡入并出现在屏幕上。我知道我必须使用change的类似功能，但是如何在淡入淡出中添加，以便在未显示用户第一次加载页面时的元素，但选择了下拉选项时，它会淡入并出现。

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

如果我理解正确，这应该对您有所帮助。包括事件更改和加载 ajax 后的动画。

$('#scenarioDropdownList').change(function() {
$('#descriptionDisplay').( "slow", function() {
    // Animation complete.
  });
  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);
      });
    $('#descriptionDisplay').fadeOut( "slow", function() {
    // Animation complete.
  });
    },
    error: function() {

    }
  });
}

【讨论】：

【解决方案2】：

您需要在用户更改选项时淡出段落元素，以便在更改文本后能够淡入。

$('#scenarioDropdownList').change(function() {
      var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
      // Fade out
      $('#descriptionDisplay').fadeOut();
      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) {
            // Fade in
            $('#descriptionDisplay').text(val.scenarioDescription).fadeIn();
          });
        },
        error: function() {

        }
      });
    }

【讨论】：