jquery与fadeTo一起闪烁加载

I've seen a few posts on this, but none with a solution that works for me - and I've tried a lot. I'm just executing a simple sequence - fade div out, load content, fade dive in, but the content that is loaded appears for a moment in full opacity and then disappears, then executes the fade. I've tried setting the display property of the loaded div to none and then showing it in the fade in function, setting delays, for showing, etc. I've tried fadeTo, fadeOut, etc. Incidentally, hide() works fine, but it's not the effect I want.

我已经看到了一些关于此的帖子，但没有一个解决方案对我有用 - 而且我已经尝试了很多。我只是执行一个简单的序列 - 淡入淡出，加载内容，淡入淡出但是加载的内容在完全不透明度中出现片刻然后消失，然后执行淡入淡出。我已经尝试将加载的div的显示属性设置为无，然后在淡入功能，设置延迟，显示等中显示它。我尝试过fadeTo，fadeOut等。顺便说一句，hide（）工作正常，但这不是我想要的效果。

Here's my code:

这是我的代码：

...

$('#bio_container').fadeOut(500,loadContent(ident));
});

function loadContent(ident){
    $('#bio_container').load('/index.php/ajax/bios/' + ident,showContent);
}

function showContent(){
    $('#bio_container').fadeIn(500);
}

Any ideas would be appreciated.

任何想法，将不胜感激。

2 个解决方案

#1

Try this.

尝试这个。

$('#bio_container').fadeOut(500, function(){
     loadContent(ident)
});

Edit: If you look at fadeOut's definition it accepts a callback as an argument and invokes that function when the animation has finished. So a callback reference is either an inline function definition like the above one or just a function name without paranthesis. If you give something like this someFunction() it evaluates the function and then takes the return value as an argument. And possibily throws a suppressed exception when the animation is finished and invoking the result.

编辑：如果查看fadeOut的定义，它会接受一个回调作为参数，并在动画结束时调用该函数。因此，回调引用要么是像上面那样的内联函数定义，要么只是没有paranthesis的函数名。如果你给这样的东西someFunction（）它会评估函数，然后将返回值作为参数。并且在动画完成并调用结果时可能会抛出一个被抑制的异常。

#2

It's happend, because javascript is executed in lineal form, and fadeOut(time,fn) execute the fn and THEN execute te fade.

它发生了，因为javascript以线性形式执行，而fadeOut（time，fn）执行fn，然后执行te淡入淡出。

To fix this i use some JQuery plugins, for your case i suggest this simple slideshow, or if you are looking for something more specific see this list.

为了解决这个问题，我使用了一些JQuery插件，对于你的情况我建议这个简单的幻灯片，或者如果你正在寻找更具体的东西，请看这个列表。

PS: Sorry for my bad english.

PS：抱歉我的英文不好。

#1