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和第二圖像只。可見

您可以調整計時以創建一個漂亮的交叉淡入淡出。