淡出和淡入卡片元素

<form class=“mt-4 mw-800 center block animated fadeinup”>
<DIV class=“row”>
<DIV class=“col-lg-12内容”>
<DIV class=“卡主卡”>
<div class=“card header”>
<h3 class=“card title”>$random_idea->标题</h3>
</DIV>
<div class=“card body”>
$random_idea->描述
</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>
myjquery代码如下:


$(“idea”).click(function()。{
.ajaxsetup美元({
标题:{
'x-csrf-token':$('input[name=“_token”]').val())
}
(});

美元.ajax({
键入:“post”,
网址:“/idea”,
成功:功能(响应){
$(“.card”).fadeout();

$('<DIV class=“Card Primary”>''+
'lt;div class=“card header”>''+
'<h3 class=“card title”>'+response.title+'</h3>''+
'lt;/DIV>''+
'<div class=“card body”>'+响应。说明+
'lt;/DIV>''+
'</div>').appendto('.content').fadein();

}
错误:函数(jqxhr,textstatus,errorthrough){
console.log(抛出错误);
}
(});
(});
卡DIV正在淡出和淡入。但是有一个延迟,显示不好。


我的布局如下:



当你点击按钮时,卡会淡出,另一张卡会淡入。但它不光滑。你有什么办法帮我吗?

我的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正在淡出和淡入。但是有一个延迟,这不太好。

我的布局如下:



当你点击按钮时,卡会淡出,另一张卡会淡入。但它不光滑。你有什么办法帮我吗?