发表于： 2018-05-21 20:42:39
1 611
一、今天完成的事情
1、今天完成了任务13，菜单从左方滑入和滑出效果的实现。
将需要滑入的div在css中默认设为visibility: hidden;。在js中写button的onclick事件，首先将visibility设为visible，然后其left设为负的div的width，然后设置.animate的fadeIn动画，将left滑动到0，同时将原页面的left滑动到div的width，从而完成滑入部分。
对于滑出部分，onclick绑定在window上，通过event.pageX和Y获取鼠标点击位置。由于滑入div宽度设为页面的60%，则点击的X大于60%的window.width时将滑出的部分滑回去。此时还是用animate动画，div滑到负的div的width，主题页面滑到0。
二、明天计划的事情
1、明天开始写任务14
三、遇到的问题
1、在滑回后，再点击按钮，滑出效果会很奇怪。原来是滑回时用了fadeOut，会将display设为none。在滑入函数中加入判断，如果div的display为none则设为block，将问题解决。
四、收获
1、首次尝试了左边部分滑入滑出的效果。熟悉了jquery的事件触发绑定。
返回列表
评论