仿拉勾官网图片随鼠标滑入效果，有个小疑问

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3866 days ago, the information mentioned may be changed or developed.

效果

鼠标滑入元素后， hover 层从鼠标滑入的边界处滑入。

源码

源码传送门

在线实例

实例传送门

请大家无视兼容性问题，该问题在整体完成后再解决。

疑问

在我写的方法中，每当触发mouseenter事件时，需要将 hover 元素移动至事件触发时边界的外面，然后再移入。但若编写如下代码：

var div = document.querySelector('div');

div.style.left = '0';
div.style.left = '100px';

当真正调用时，由于 javascript 引擎优化，元素的 left 会被直接设置为 100px ，无法达到我的目的。

目前我的解决方案是使用定时器，将第二次坐标的改变延迟，形如：

div.style.left = '0';

setTimeout(function(){
    div.style.left = '100px';
},20);

请问：
有没有其他更好的方式解决该问题？

10 replies • 2015-10-22 01:21:33 +08:00

shoaly

Oct 20, 2015

你提问题的姿势好优美

noBoundary

Oct 20, 2015

@shoaly 是我提问方法有问题么。。还是说我没描述清楚。。。

titanp

Oct 20, 2015

提问姿势确实优美

titanp

Oct 20, 2015

@noBoundary 是真的优美＝。＝没有反义

Marfal

Oct 20, 2015

@noBoundary 哈哈哈哈

TakanashiAzusa

Oct 20, 2015

讲真，完整代码太长，不怎么想看。不负责任的提个意见，你可以试试看：（因为自己没有尝试过，不保证有效）
两个连续赋值语句之间加个 console 打断一下。

hienchu

Oct 20, 2015

有没有试用 transform 而不是直接把元素移出去

secondwtq

Oct 20, 2015

代码留下了，最近也要做一个类似的效果，谢谢楼主分享。

我记得有特别的 trick 可以强制 reflow 的执行，楼主可以搜索一下，不是特别确定，并且貌似也并不是什么好的 practice 。

anthozoan77

Oct 20, 2015

真的优美，学习提问的姿势...

noBoundary

Oct 22, 2015

我找到了一个新的方法触发 flow ，替换定时器方案，原理是获取该元素的属性，形如：

```javascript
div.style.left = '0px';
window.getComputedStyle(div,null)['left'];
div.style.top = '100px';
```

同时源码做了部分更新，兼容性还未处理完毕～希望大家有空可以看看，提提建议。如果有需要，可以 star 一下～

源码地址见问题部分。