javascript - 页面更改时 Javascript 图像交叉淡入淡出

Question

我是一名新手 HTML 开发人员，虽然我根本没有学过 Javascript，但我想将它包含在我的第一个更大的网页中。
我的布局看起来像这样，顶部有标题、菜单和图像。

图像会根据所选的菜单项而变化。
我想做的是让图像在彼此之间平滑淡入淡出，但我在互联网上找到的指南仅描述了堆叠在一起以创建画廊的图像。

如何将每个图像指定为 HTML 页面？它是否有效，或者我是否必须彻底更改我的网页以仅更改内容而不加载单独的 HTML？

Answer 1

看看 JQuery 的 animate 函数：它是这样的：

$("#idOfYourImage").animate({opacity: 1}, 1000, function(){
  //Function to be executed when the animation is done
})

第二个参数 (1000) 代表动画的持续时间。

为此，您必须将图像 css 设置为 opacity: 0，以便它可以在 opacity 0 和 opacity 1 之间进行动画处理（这称为淡入）

美元符号代表 JQuery，您必须包含该脚本才能使其工作