javascript - 淡出淡入卡片元素

Question

我正在尝试淡出和淡入卡片元素。我的 html 如下所示:

<form class=" mt-4 mw-800 center-block animated fadeInUp">
    <div class="row">
        <div class="col-lg-12 content">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{{ $random_idea->title }}</h3>
                </div>
                <div class="card-body">
                    {{ $random_idea->description }}
                </div>
            </div>
        </div>

    </div>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <button id="idea" type="button" class="btn btn-raised btn-primary btn-block">
        Geef mij een ander idee</button>
</form>

我的 jQuery 代码如下所示:

$( "#idea" ).click(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });

    $.ajax({
        type: "POST",
        url: "/idea",
        success: function(response) {
            $(".card").fadeOut();

            $('<div class="card card-primary">' +
                '<div class="card-header">' +
                  '<h3 class="card-title">' + response.title + '</h3>' +
                '</div>' +
                '<div class="card-body">' + response.description +
                '</div>' +
              '</div>').appendTo('.content').fadeIn();

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

卡片div在淡出淡入，但是有延迟，显示不好。

我的布局是这样的:

当你点击按钮时，卡片淡出，另一张卡片淡入。但它并不流畅。你有什么想法可以帮助我吗？

Answer 1

jQuery fadeIn() 和 fadeOut() 是异步的。因此，新旧元素一起淡入/淡出。但是，那些方法获得回调将在动画之后调用。因此，您可以重写您的 success 函数，如下所示:

$(".card").fadeOut(function() {
  $(this).remove();

  $('<div class="card card-primary">' +
    '<div class="card-header">' +
      '<h3 class="card-title">' + response.title + '</h3>' +
    '</div>' +
    '<div class="card-body">' + response.description + '</div>' +
  '</div>').appendTo('.content').fadeIn();
});