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

Posted 2023-02-19

【中文标题】如何在更改事件上添加fadeIn Jquery

【英文标题】：How to add fadeIn Jquery on a change event

【发布时间】：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的类似功能，但是如何在淡入淡出中添加，以便在未显示用户第一次加载页面时的元素，但选择了下拉选项时，它会淡入并出现。

【参考方案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() 

        
      );