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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3326 天前的主题，其中的信息可能已经有所发展或是发生改变。

效果

鼠标滑入元素后， 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 条回复 • 2015-10-22 01:21:33 +08:00

shoaly

2015-10-20 22:13:40 +08:00

你提问题的姿势好优美

noBoundary

2015-10-20 22:20:40 +08:00

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

titanp

2015-10-20 22:21:08 +08:00

提问姿势确实优美

titanp

2015-10-20 22:22:56 +08:00

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

Marfal

2015-10-20 22:23:53 +08:00

@noBoundary 哈哈哈哈

TakanashiAzusa

2015-10-20 22:43:34 +08:00

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

hienchu

2015-10-20 22:54:56 +08:00

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

secondwtq

2015-10-20 23:15:05 +08:00

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

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

anthozoan77

2015-10-20 23:42:14 +08:00

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

noBoundary

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

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

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

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

源码地址见问题部分。