图像淡入另一个，然后功能加载新的网页

Question

基本上我正在努力寻找与this类似的效果。

我想让我的网站的第一页通过点击按钮将图像淡入另一个图像，然后使用计时器在大约2秒后打开一个不同的页面。

我有基于上面例子切换图像的代码，我不太熟悉JavaScript，所以我的麻烦是编写一个JavaScript函数，在第二个图像大约2秒后加载一个新页面出现。

Answer 1

不使用像示例中的css动画，而是使用jQuery来制作动画并使用完整的函数进行转发：

$("#cf_onclick").click(function() {
    $("#cf_onclick").animate(
        {"background-image": "img2.jpg"},
        2000,
        'linear',
        function() {
             window.location.href = "page2.html";
        }
    );
});

您还应该考虑将两个图像放在一个图像文件中并切换背景位置或覆盖两个img标签并淡出第一个，否则浏览器将需要在动画开始时加载第二个图像。