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

时间:2014-11-05 15:24:32

标签: javascript image cross-fade

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


图像根据所选菜单项而变化 我想做的是让图像在彼此之间平滑地淡化,但我在互联网上找到的指南只描述堆叠在彼此之上的图像以创建一个图库。

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

1 个答案:

答案 0 :(得分:0)

看看JQuery的动画功能: 它是这样的:

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

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

要使其工作,您必须将图像css设置为不透明度:0,因此它可以在不透明度0和不透明度1之间设置动画(这称为淡入)

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