加載時觸發jQuery

Question

我想在我的網站上的背景圖像之間淡入淡出。 我已經發現如何通過點擊觸發淡入淡出效果，但我不知道如何自動啓動它。我想出了這個（JavaScript代碼）：

$('div').click(function (e) { 
     $(this).parent().append('<div style="position:absolute; top: 25px; left: 25px; z-index: 1;" class="google"></div>'); 
     $(this).fadeOut('slow'); 
    }); 


function fade() { 
     $(this).parent().append('<div style="position:absolute; top: 25px; left: 25px; z-index: 1;" class="google"></div>'); 
     $(this).fadeOut('slow'); 
}; 

看到：http://jsfiddle.net/bbqunfhu/1/第一功能被觸發上點擊第二個應該在網頁的「的onload」事件被調用。 我想在頁面加載後觸發淡入淡出，比方說10秒鐘後，我會想讓它有多個圖像，我該如何實現這種效果？

Answer 1

您需要以較少的相對條件更正您的jQuery參考/選擇器。例如，您可以在負載中調用它：

function fade() { 
     $('div.jquery').parent().append('<div style="position:absolute; top: 25px; left: 25px; z-index: 1;" class="google"></div>'); 
     $('div.jquery').fadeOut('slow'); 
}; 

fade(); 

js.fiddle這裏。

你原來的代碼定義了fade()函數，但沒有調用它。這就是爲什麼fade沒有發生。你需要以某種方式稱它。

此外$(this).parent()可能意味着div內部不同的東西是點擊回調和在一個函數中。

Answer 2

你試過onReady和setTimeout嗎？

平原jQuery的

$(document).ready(function(){ 
    setTimeout(fade, 10000); // this will call fade function 10 sec after page loads. 
}); 

第二種方法是在你的腳本寫：

setTimeout(fade, 10000) 

但包括你的腳本延遲atttribute，就像這樣：

Answer 3

當你有正確的css類到位，你可以像下面這樣做 Working Fiddle

我在這裏使用toggleClass和fadeComplete處理程序。

• 我們應該保持腳本文件準備功能處理
• 載它會改變BG-圖像
• 每次點擊的BG-圖像將獲得在課堂上規定的翻轉。

腳本：

$(function() { 
    var $div = $('div.jquery').click(function (e) { 
     $(this).fadeOut('slow', function() { 
      $(this).toggleClass('google').fadeIn('slow') 
     }) 
     clearTimeout(clickTimer); 
    }); 
    var clickTimer = setTimeout(function() { 
     $div.click(); 
    }, 10000); 
});