jQuery调整大小菜单栏滚动与改变图像

Question

http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/是一个相当简单，典型，易于使用的调整大小菜单栏。图像也缩小比例，但我怎样才能使图像完全交换与转换？这个（JS/jQuery swap image on scroll event）是一个非常简单的交换图像的解决方案，是的，但是在向下滚动和备份时淡入/淡出转换似乎更难以实施。

Answer 1

您可以使用css转换来将不透明度转换为类。

.visible { 
    transition: .3s opacity; 
    opacity: 1; 
} 

.hidden { 
    opacity: 0; 
} 

只是第一形象。可见和第二图像.visible.hidden 然后为菜单转换交换类，所以第一形象.visible.hidden和第二图像只。可见

您可以调整计时以创建一个漂亮的交叉淡入淡出。