如何在页面转换时使图像淡出？

Question

新编程，以及现在正在我公司的网站上工作......我试图在http://www.la-grange.ca这个网站上尝试实现类似于页面转换的内容。我希望他们的页面转换与木材有类似的影响..但我无法弄清楚如何做到这一点或者我应该如何解释它...任何建议？

Answer 1

使用jQuery：

$(".button").on("click", function() {
    $(".transitionbar").removeClass('hidden');
    $(".transitionbar").css({height: '400'}).animate({marginTop: '-840'}, 1000);
});

这里有类似的东西，经过快速的游戏后，它只是你想要实现的目标的开始。

http://jsfiddle.net/1c885e3f/

如果您计划使用Ajax来显示页面内容，则需要为该项目设置重置功能的脚本，否则在运行单独的页面时这应该有效。

这里有一个简单的例子，说明重置的样子：

http://jsfiddle.net/1c885e3f/1/