jquery淡入回调而不是等待

我试图让一个div消失，然后在它的位置有第二个div淡入，但第二个div消退的回调似乎不等待第一个完成淡入淡出，实际上它们都褪色时间给予交叉淡入效果的父亲而不是淡出然后在之后。 inheritance人代码：

$(document).ready(function () { //toggle story text $(function () { $("#imageGallery").scroll(function () { if ($(this).scrollLeft() > 1000) { $("#story2").fadeIn("300", function () { $("#story1").fadeOut("300"); }); } else { $("#story1").fadeIn("slow"); $("#story2").fadeOut("slow"); } }); }) }); 

和页面即时使用它：

http://www.jonathantopf.com/imijstudio/

任何想法为什么会这样？

Answer 1

在淡出另一个div之前，你正在淡入新的div。 这会产生交叉淡化效果，这就是你看到它的原因。 也许你的意思是：

 $("#story1").fadeOut("300", function () { $("#story2").fadeIn("300"); }); 

在淡入下一个之前淡出当前的一个。 然后，您不会同时在屏幕上看到它们（例如，没有交叉渐变）。

Answer 2

用示例jsfiddle检查这个

 $("#story1").fadeOut("300").delay(600,function(){$("#story2").fadeIn("300");}) 

Answer 3

你应该试着改变时间，他们会以同样的速度缓和：

 $("#story2").fadeIn("1000", function(){ $("#story1").fadeOut("300"); }); 

试试:)

Answer 4

你可以尝试：
$("#story1").delay(500).fadeOut("300");