我如何使用jQuery來動畫加載圖形？

這裏有什麼不對嗎？我如何使用jQuery來動畫加載圖形？

$(document).ready(function(){ 
     $(window).load(function(){$("#welcome").fadeIn(2000); }) 
     setTimeout(function(){ 
      $('div#welcome').fadeOut(2000); 
     }, 4000); 
     setTimeout(function(){ 
      $('div#content').fadeIn(2000); 
     }, 6000); 
     setTimeout(function(){ 
      $('div#menu').fadeIn(2000); 
     }, 8000); 
    });

這看起來似乎沒有運行，因爲它應該，因爲所有的功能將被稱爲並行。

此外，人們告訴我，我的圖形將被加載延遲並會「粘住」。

我感謝任何幫助！

來源

2011-07-26 Evils

我在想，爲什麼會有一個java標籤？ –

你想達到什麼目的？ #welcome淡出後，每個項目都會逐漸淡出？ – diagonalbatman

我知道這不是您要找的內容，但我強烈建議您不要在8秒內（或任何時候）延遲顯示您的內容。這會讓大多數人遠離您的網站。 –

因此，語法的角度來看，沒有在窗口的最後一個分號.load事件設置器。你應該補充一點。

但是，我只是用模擬HTML集運行你的JS，它運行良好。不知道你正在經歷什麼。所有三個setTimeout調用都將同時開始運行。所以...而不是花18秒跑，他們只需要8秒就可以跑。看起來這就是你想要的。

這裏是最有效的等待來雖然編寫代碼：

$(document).ready(function(){ 
    $(window).load(function(){ 
     $("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){ 
      $('div#content').fadeIn(2000,function(){ 
       $('div#menu').fadeIn(2000);  
      });  
     }); 
    }); 
});

這裏，會發生什麼是您的每一個動畫將觸發下一個動畫，完成時他們。

來源

2011-07-26 15:41:44 frosty

非常感謝您的幫助;）它現在似乎工作！ – Evils

你可以請點擊我的名字旁邊的向上箭頭。它幫助我在這裏得分。 – frosty

@aaronfrost他不能直到今天。您需要15個代表投票權。 –

我認爲你正在尋找這樣的東西。

$(document).ready(function(){ 
     $("#welcome").fadeIn(2000, function(){ 
      setTimeout(function(){ 
       $('div#welcome').fadeOut(2000, function(){ 
       setTimeout(function(){ 
        $('div#content').fadeIn(2000, function(){ 
         setTimeout(function(){ 
         $('div#menu').fadeIn(2000); 
         }, 8000); 
        }); 
       }, 6000); 
       }); 

      }, 4000); 
     }); 
    });

來源

2011-07-26 15:24:34 ShankarSangoli

請看前面的例子。這有太多的語法，並會等待比作者預期的更長的時間。例子...爲了完成最初的歡迎，使用這段代碼，它將等待6000毫秒以完全淡出，而不是作者想要的4000毫秒。太多等待。此外，等待應該使用setTimeout手動設置，它應該使用完整的回調函數完成。 – frosty

用戶不清楚他需要什麼。我認爲他並不需要這些動畫中的任何一個。所以每個下一個動畫都在等待前一個動畫的完成。 – ShankarSangoli

如果您想在某些事情完成後做些事情，您需要在設置參數（本例中爲2000）後添加另一個功能。

我相信你想要做這樣的事情http://jsfiddle.net/Cp4Dx/

來源

2011-07-26 15:27:47 sed

OP不要忘了jQuery的延遲）（）函數，它可以幫助您避免的setTimeout（。

$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});

來源

2011-07-26 15:31:08 robertjflong

您可以使用jQuery的隊列吧：

$(document).ready(function() { 
    $('#welcome').fadeIn(2000).delay(2000).fadeOut(2000); 
    $('#content').delay(4000).fadeIn(2000); 
    $('#menu').delay(6000).fadeIn(2000); 
});

演示：http://jsfiddle.net/ThiefMaster/9nPAR/

來源

2011-07-26 15:31:29 ThiefMaster

我如何使用jQuery來動畫加載圖形？

回答

相關問題