Javascript image image cross-fade on page change

我是一个新手HTML开发人员，虽然我还没有教过JavaScript，但我想将其包含在我的第一个更大的网页中。
我的布局看起来像这样，标题，菜单和图片在顶部。Javascript image image cross-fade on page change

基于所述选择的菜单项的图像的变化。
我想要做的是使图像彼此之间平滑淡化，但我在互联网上找到的指南只描述堆叠在彼此顶部的图像以创建图库。

我该如何指定每个图像到HTML页面？它是否工作，或者我将不得不大幅改变我的网页，只改变内容，不加载单独的HTML？

来源

2014-11-05 Tallmios

如果您加载新页面，则无法进行转换（您可以但会吸）。您需要使用AJAX或其他内容已经加载并显示它，而不是转到其他页面。 – 2014-11-05 15:27:36

这是仅用于图像还是会在图像下方显示内容？对于任何类型的动画，我都会推荐[wowjs]（http://mynameismatthieu.com/WOW/），它可以帮助您在[animate css]中使用动画（http://daneden.github.io/animate.css /） – ODelibalta 2014-11-05 15:28:33

随着我网页的基本功能和仅使用HTML，我可能会通过这个概念。感谢你的回答。 @Sage在图像下面会有内容（段落）和页脚。 – Tallmios 2014-11-05 15:31:37

浏览jQuery的动画功能：它是这样的：

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

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

对于这个工作，你有你的形象CSS设置不透明度：0，所以它可以不透明度0和不透明度1之间的动画（这就是所谓的淡入）

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

来源

2014-11-05 15:30:50 ErikBrandsma

Javascript image image cross-fade on page change

回答

相关问题