jQuery淡入淡出幻燈片

Question

誰能幫助我實現以下jQuery循環自動幻燈片顯示。 步驟如下：1.首先淡入幻燈片圖像，然后淡入字幕背景，最后淡入字幕文本。這里是可視示例。

http://www.markupxpert.com/slideshow/step1.jpg

http://www.markupxpert.com/slideshow/step2.jpg

http://www.markupxpert.com/slideshow/step3.jpg

謝謝保羅

Answer 1

關於jQuery fadeIn

fadeIn具有回調函數，動畫完成后將調用該函數。 您可以使用它來開始第二個動畫，如下所示：

$('#clickme').click(function() {

   // 1st anim starts here
   $('#slideshowImage').fadeIn('slow', function() {

       // 1st anim ended, 2nd starts here     
       $('#captionBackground').fadeIn('slow', function() {

         // 2nd anim ended, 3rd stars here
          $('#captionText').fadeIn('slow');        

       });        
   });
});

正如我注釋掉的那樣，動畫部分從click事件的回調函數開始。 當然，您可能不想通過單擊按鈕而不是循環來啟動動畫。 在這種情況下，您只需要中間部分。

另外，您需要修改jQuery選擇器以fadeIn適當的元素。 （可能它們不被稱為#slideshowImage左右）