javascript - Image Fades Into Another，然后函数加载新网页

Question

基本上我正在尝试获得类似于 this 的效果.

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

我有基于上述示例的用于切换图像的代码，我不太精通 JavaScript，所以我的问题是编写一个 JavaScript 函数，它会在第二张图像大约 2 秒后加载一个新页面出现。

Answer 1

不是像示例中那样使用 css 动画，而是使用 jQuery 来制作动画并使用 complete 函数来进行转发:

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

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