2011-11-13 27 views
3

即時試圖讓一個div淡出,然後有第二個div在它的位置淡入淡出,但第二個div淡出的回調似乎並沒有等待第一個完成淡入淡出,實際上它們同時褪色,同時給父親帶來淡入淡出效果,而不是淡出效果,然後在之後。繼承人的代碼:jquery淡入回調不等待

$(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"); 
      } 
     }); 

    }) 

}); 

,並在使用它的網頁IM:

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

任何想法,爲什麼發生這種情況?

+0

爲了調試,你可以增加淡出的持續時間從第二個三分之一說5000毫秒。 –

回答

6

你褪色在新的div之前淡出其他div。這會產生淡入淡出效果,這就是您看到它的原因。也許你的意思是:

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

在你淡入下一個之前淡出當前的一個。然後,您不會同時在屏幕上看到它們(例如,沒有交叉淡入淡出)。

+0

不能相信我錯過了!謝謝 –

+0

@jonathan topf我同意jfriend00給出了正確的答案(+1給他),但我的也可行... – Wazzzy

0

你應該嘗試改變的時候,他們都以同樣的速度緩和:

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

試試:)

0

你可以嘗試:
$("#story1").delay(500).fadeOut("300");

1

檢查了這一點與例如jsfiddle

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