加载时触发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); 
});