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 淡出淡入。但有延迟，显示效果不佳。

我的布局如下所示：

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

标签： javascriptjqueryhtmlcss

Answer 1

jQueryfadeIn()和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();
});