Как добавить fadeIn Jquery на событие изменения

Question

У меня есть <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>

Как можно видеть, у меня есть функция, которая в данный момент находится на событии изменения, которая выбирает текущий идентификатор сценария выбранной опции в раскрывающемся списке , Затем он передается в качестве параметра в вызов AJAX, который взаимодействует с веб-API, который фильтрует данные. Затем данные возвращаются, и я добавляю их в тег <p>. Это все работает правильно, как и должно.

Однако я хотел бы реализовать это так, чтобы при изменении пользователем выбранного параметра раскрывающегося списка текст добавлялся к тегу (как он есть в настоящее время), но также он исчезал и появлялся на экране. Я знаю, что должен использовать аналогичную функциональность change, но как бы я go добавил в постепенное увеличение, чтобы элемент, когда пользователь впервые загружает страницу, не отображался, а когда был выбран параметр раскрывающегося списка, его исчезает и появляется.

Answer 1

Вам нужно затушевывать элемент абзаца, когда пользователь изменяет опцию, чтобы иметь возможность его плавного изменения после изменения его текста.

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

        }
      });
    }

Answer 2

Если я правильно понял, это должно помочь вам. Включить анимацию при изменении события и после загрузки 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() {

    }
  });
}