我正在尝试淡出和淡入卡片元素。我的 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在淡出淡入,但是有延迟,显示不好。
我的布局是这样的:
当你点击按钮时,卡片淡出,另一张卡片淡入。但它并不流畅。你有什么想法可以帮助我吗?
最佳答案
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();
});
关于javascript - 淡出淡入卡片元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51138279/