javascript 如何为 jquery load() 设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8493879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to animate jquery load()
提问by Ali Demirci
hello im using this code to load content from another php file.
你好，我使用此代码从另一个 php 文件加载内容。
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).load('tx.php');
});
}, 1000);
});
this works correctly but i want script to fadeIn each "li" when a new record added, anyone?
这工作正常，但我希望脚本在添加新记录时淡入每个“li”，有人吗？
the thing i want to do is something like facebook's live user action feed that on the right top of facebook home
我想做的事情就像 Facebook 主页右上角的 facebook 实时用户操作提要一样
回答by Andri
You have to hide it first.
你必须先隐藏它。
$(this).hide().load("tx.php").fadeIn('500');
回答by sirmdawg
Try something like this:
尝试这样的事情：
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).hide().load('tx.php').fadeIn('500');
});
}, 1000);
});
Note the use of fadeIn()and hide()... You don't need hide if you already have the <li>'s hidden.
请注意fadeIn()and的使用hide()...如果您已经<li>隐藏了's ，则不需要隐藏。
回答by dku.rajkumar
call handler while loading
加载时调用处理程序
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).load('tx.php', function(){
$('li').fadeIn("normal");
});
});
}, 1000);
});
回答by Shyju
what if you call the fadeIn method
如果你调用fadeIn方法会怎样
$(this).load('tx.php').fadeIn(400);
回答by frank_neff
$(this) is shown before the .fadeIn("1000") will be executed. First you have to hide the selected element, load the content and then fadeIn, like this:
$(this) 在 .fadeIn("1000") 执行之前显示。首先，您必须隐藏所选元素，加载内容，然后淡入淡出，如下所示：
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).hide().load('tx.php').fadeIn("1000");
});
}, 1000);
});
Or hide the elements with css:
或者用 css 隐藏元素：
display: none;
EDIT: Should be something like this, but it's not tested...
编辑：应该是这样的，但它没有经过测试......
$(document).ready(function(){
setInterval(function(){
var streamListElement = $(document.createElement("li")).load('tx.php').hide();
$('.live-stream ul').append( streamListElement ).find(":hidden").fadeIn("3000");
}, 1000);
});
回答by shaunsantacruz
Use the callback but hide the li using CSS display: none;fadeIn should work after that.
使用回调但使用 CSSdisplay: none;淡入隐藏 li之后应该可以工作。
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).load('tx.php', function(){
$(this).find('li').fadeIn();
});
});
}, 1000);
});
回答by Khairu Aqsara
have you tried this one?
你试过这个吗？
$(document).ready(function(){
setInterval(function(){
$('.live-stream ul').each(function(){
$(this).load('tx.php').fadeIn('1000');
});
}, 1000);
});
hmmm, what about this one
嗯，这个怎么样
$(function(){
//Fade in all objects.
var wrapper = $("live-stream ul");
$(wrapper).hide();
function fadeInAll(elem, fadeInTime, timeBetween)
{
for(i=0; i<elem.size(); i++)
{
$(elem[i]).delay(i*(timeBetween+fadeInTime)).fadeIn(fadeInTime);
}
}
fadeInAll($(wrapper), 1000, 500);
});
回答by Longbin Chen
I don't think you can use animation directly on load(). But here is the trick I used:
我认为您不能直接在 load() 上使用动画。但这是我使用的技巧：
$("#id").animate({opacity: 0},1000);
$("#id").load(url);
$("#id").animate({opacity: 1},1000);
The element doesn't display, just becomes transparent. It looks just the same.
该元素不显示，只是变得透明。它看起来是一样的。
回答by Ilya Iksent
That worked for me without any issues of content flickering:
这对我有用，没有任何内容闪烁问题：
const pageLink = '/...'
const $container = $("#page-content")
$container.hide().load(pageLink, () => {
$container.fadeIn(500)
});
