jquery - 如何让图像出现然后淡出然后淡入主页？

Question

我是 Jquery 的新手，我相信我需要在这里做我需要做的事情。

客户希望他们的主页仅以可见的徽标图像开始，然后在大约一秒钟后淡入主页的导航和内容。徽标图像将出现在中心（垂直和水平）。同时，logo 显示时主页以灰度显示在背景中。

Answer 1

在其他一切之上创建图像。这可以通过设置 position: absolute 来完成，也可以调整 z-index。给出图像和ID。

您可以链接 animate() 函数并在其中放置您想要的任何效果。

$( "#block1" ).animate({opacity: 100%;},1000).animate({opacity: 0%;},1000);

因为在动画之后您要删除图像以使其不显示（或者您无法单击图像下方的任何内容）。

所以可以使用切换而不是动画（但切换也会调整高度和宽度作为其效果的一部分）：

$( "#block1" ).toggle(1000);

要最初只显示图像，请将其他所有内容放在一个 div 中，并将其设置为 display: none in css。然后在http://api.jquery.com/toggle/处设置一个回调（ .toggle( [duration] [, callback] ）。对于回调，声明一个函数来为其他所有内容重新设置显示：

$( "#block1" ).toggle(1000, function () {
  $("#everythingelse").css("display: inline");
});

或者您可以使用动画功能将显示设置为无：

$( "#block1" ).animate({opacity: 0%;},1000,"linear", function () {
  $( "#block1" ).css("display: none");
  $("#everythingelse").css("display: inline");
});

使用 animate（更多信息请访问http://api.jquery.com/animate/），您可以对其效果进行更多自定义控制

Answer 2

在动画函数中使用回调函数，看看这个教程...... http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/