Javascript 当元素淡出时添加加载gif，当新元素淡入时将其删除
我设置了这种分页方式，这样当用户单击下一个箭头（Javascript 当元素淡出时添加加载gif，当新元素淡入时将其删除,javascript,jquery,Javascript,Jquery,我设置了这种分页方式，这样当用户单击下一个箭头（.paging navigation a）时，当前的一组博客文章淡出，新的一组淡入。有时在加载新集时会出现延迟，我想在那里插入一个加载gif，这样用户就知道没有任何问题 以下是我如何设置它的： $('#article-list').on('click', '.paging-navigation a', function(e){ e.preventDefault(); var link = $(this).attr('href');
.paging navigation a$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').fadeOut(500, function(){
// I would like to put in the animation gif here
and fade it away when the new set of posts
fade in.
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});
<div id="news">
<div id="article-list">
<img class="loading-list" src="loading.gif" style="display:none">
(blog posts here)
<div class="paging-navigation">
<div class="nav-previous">
<a href="#">Prev</a>
</div>
<div class="nav-next">
<a href="#">Next</a>
</div>
</div>
</div>
</div>
#文章列表#news #article-list {
overflow: hidden;
text-align: center;
}
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').fadeOut(500, function(){
document.getElementsByClassName("loading-list")[0].style.display="block";; <// added
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
document.getElementsByClassName("loading-list")[0].style.display="none";; <// added
});
});
$（“#文章列表”）。在（'click'，'上。分页导航a'，函数（e）{
e、 预防默认值（）；
var link=$（this.attr（'href'）；
$（'html，body'）。设置动画({
scrollTop:$（“#新闻”）.offset（）.top-60
}, 500);
$（“#文章列表”）.fadeOut（500，function（）{
document.getElementsByClassName（“加载列表”）[0]。style.display=“block”；编辑，更新
试一试
v3
jsiddle您需要将$（'.loading list'）.hide（）移动到.load（）
的回调函数中
因此，显示gif，开始加载新内容，然后当内容加载完毕时，回调函数隐藏gif并在新内容中淡出
至于高度，您可以使用CSStransition
来平滑更改。但是，由于无法在height:auto
之间进行转换，因此需要一种解决方法。例如：
CSS:
JS（jQuery）：
因此，在您开始淡出旧内容之前，您设置了min height
，这样div就不会折叠。当新内容开始淡入之后，它已经填充了部分div的高度，您将min height
设置回0，允许过渡平滑地将div收缩到新内容的高度ht
如果有些东西不起作用，请告诉我，因为我测试这段代码有点困难。如果可能，可以发布html
中包含的a
元素吗？谢谢a
元素？你的意思是包装img
标记吗？。分页导航，。分页导航a
元素（html）未在OP中显示包含？抱歉，忘记了。我包含了它。再次抱歉。包含了它。它是所有内容的包装。我在你的小提琴中没有看到加载gif。是因为它太快了吗？尝试单击“上一步”、“下一步”？这也不起作用。当我单击导航箭头时，加载的gif会弹出，然后在收缩时消失。新帖子也不会显示。请参阅更新的帖子。已将.show（）
/.hide（）
更改为.fadeIn（）
/.fadeOut（）
，调整了.load（）的选择器
它仍然不起作用。加载程序仍然运行得太快，当我在第二组帖子上单击左箭头时，仍然会保留同一组帖子。@J82是否确实嵌入了代码，因为单击箭头后图像仍然显示为无！@J82 ohh您选择了一个类，这将返回节点列表将编辑代码抱歉。我我试过你的代码，但是现在看起来加载的gif出现了，但是没有消失，新的帖子也没有出现。另外，我看到CSS的变化，但是没有平滑的过渡。
<div id="news">
<img class="loading-list" src="loading.gif" style="display:none">
<div id="article-list">
(blog posts here)
<div class="paging-navigation">
<div class="nav-previous">
<a href="#">Prev</a>
</div>
<div class="nav-next">
<a href="#">Next</a>
</div>
</div>
</div>
</div>
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').fadeOut(500, function(){
$('.loading-list')[0].show(); <// added
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
$('.loading-list')[0].hide(); <// added
});
});
document.getElementsByClassName("loading-list")[0].style.display="block";
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').fadeOut(500, function(){
document.getElementsByClassName("loading-list")[0].style.display="block";; <// added
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
document.getElementsByClassName("loading-list")[0].style.display="none";; <// added
});
});
$('#article-list')
.on('click', '.paging-navigation a', function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500, "linear");
$('#article-list *:not(img.loading-list)')
.fadeOut({
duration: 500,
start: function (promise) {
$("img.loading-list")
.fadeIn(0);
}
}).promise().done(function(el) {
$(el).siblings("img.loading-list")
.fadeOut(1500, function() {
// substituted `e.target` for `this`
$(e.target).load(link + ' #article-list', function() {
$('#article-list *:not(img.loading-list)')
.fadeIn(500);
});
})
});
});
$('#article-list').on('click', '.paging-navigation a', function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').fadeOut(500, function () {
$('.loading-list').show();
$(this).load(link + ' #article-list', function () {
$('.loading-list').hide(); //moved here
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
//from here
});
});
#article-list {
min-height: 0;
-webkit-transition: min-height 0.5s;
transition: min-height 0.5s;
}
$('#article-list').on('click', '.paging-navigation a', function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $('#news').offset().top - 60
}, 500);
$('#article-list').css('min-height', 400); //change min-height here
$('#article-list').fadeOut(500, function () {
$('.loading-list').show();
$(this).load(link + ' #article-list', function () {
$('.loading-list').hide();
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
$('#article-list').css('min-height', 0); //change min-height here
});
});
});