如何透過 jquery 或是 CSS 達成收合效果？

Question

大家好，我又遇到難題想來求救了，菜鳥就是問題一堆真的抱歉！

事情是這樣的，我做了一個版面當滑鼠往下滾動時黃色區塊必須跑出來！
但是當滑鼠 hover 到黃色區塊時，原本的藍色區塊需要從原本的位置慢慢出來到原本的位置，等到滑鼠移開時藍色區塊又可以緩慢地收合上去！

但我的思路整個打結了，就是想不出來該如何實現，因此上來討個救兵，謝謝大家觀看我的問題！

JS 第 34行是我的嘗試
https://codepen.io/hong-wei/pen/mdWGbEm?editors=1010

Answer 1

1、再写一个蓝色区块代码，样式和之前的蓝色区块相同。

2、把新的蓝色区块的定位方式换成和黄色区块一样的fixed定位。

3、隐藏新写的蓝色区块。

4、鼠标移入黄色区块 时，黄色区块消失，新的蓝色区块显示。

5、鼠标移除新的蓝色区块时，新蓝色区块消失，黄色区块显示