Question

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

客户希望他们的主页首先只显示徽标图像，然后在一秒左右后淡入主页的导航和内容。徽标图像将出现在中心（垂直和水平）。同时显示徽标时，主页在背景中显示为灰度。

Answer 1

在其他所有内容上创建图像。这可以通过使位置：绝对，并可能调整z-index来完成。给出图像和身份。

你可以链接animate（）函数并在那里放置你想要的任何效果。

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

因为在动画之后你想要删除图像以使其不显示（或者你不能点击图像下面的任何内容）。

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

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

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

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

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

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

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

Answer 2

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

如何让图像显示然后淡出然后淡入主页？

2 个答案: