时间戳

首页 > 解决方案 > 如何在更改事件上添加fadeIn Jquery

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

问题描述

我有一个<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，但是我将如何在淡入中添加淡入淡出，以便在用户首先加载页面时的元素未显示该元素，而是在选择下拉选项时淡入淡出并出现。

标签： javascriptjqueryhtmlcssajax

解决方案

如果我理解正确，这应该对您有所帮助。包括事件更改和加载 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() {

    }
  });
}

推荐阅读