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/第一个函数是在点击时触发的，第二个函数应该在＆＃34; onload＆＃34;页面的事件。我想在页面加载之后触发淡入淡出，让我们说10秒后，我想要有多个图像，我怎么能达到这个效果？

Answer 1

你试过onReady和setTimeout吗？

普通jQuery

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

第二种方法是在你的脚本中写：

 setTimeout(fade, 10000)

但是请使用defer atttribute包含您的脚本，如下所示：

Answer 2

您需要以较不相对的方式更正您的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 3

如果你有正确的CSS课程，你可以在下面做 Working Fiddle

我在这里使用了toggleClass和fadeComplete处理程序。

我们应该将脚本保留在文档就绪函数处理程序
在线加载它将更改bg-image
对于每次点击，bg-images将进行在课堂上指定的切换。

<强>脚本：

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

在加载时触发jQuery

3 个答案: