【背景介绍】
日常的网站设计中，经常会遇到鼠标移入某一区域，显示隐藏内容，这样一个效果，（具体可参照下图）。
tuila
【功能说明】
推拉效果是Axure中比较常见的一种效果，利用动态面板的显示和隐藏属性即可实现。推拉的形式分为两种，一种是不带动画的效果，第二种是带动画的效果，对于不带动画的效果，实现方式很简单，这里不做具体的陈述，接下来主要给大家介绍一下，怎么样无bug的实现带动画的推拉效果。
【实现步骤】
1、找到bug出现的原因：
经过测试，不带动画的推拉没有bug，带动画的推拉有bug，两者的区别之处如下面两幅图所示：
b-animation
** 不带动画 带动画**
经过比对，发现问题就出现了时间上，因为有了500ms的时间误差，导致鼠标来回切换过快的话，就会出现越推越远，或者越拉越近的现象，要想避免出现这种情况，就必须判断鼠标来回移动的时间。
2、解决bug
当鼠标移入时，标记当前的时间为t,当鼠标移出时，标记当前时间为t1，则时间差计算公式为：t（时间差）=t1-t，令t（时间差）和500ms进行比对，只有当t（时间差）大于500ms时，才正确，否则给出错误提示。
3、依照理论探究的方式进行实践
获取当前时间的公式：Now.gettime()
【源文件下载地址】
推拉效果
网友评论