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

Answer 2

尝试使用此

var html = '<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>';

$(html).hide().appendTo(".content").fadeIn(300);

Answer 3

之所以不流畅，是因为您没有在淡入淡出/淡入淡出功能中给出速度。

如果您阅读https://www.w3schools.com/jquery/eff_fadeout.asp上的文档，则会发现语法接受速度$(selector).fadeOut(speed,easing,callback)

您要填写fadein()的速度，而fadeout()的速度应该会平稳。

淡出和淡入卡片元素

3 个答案: