javascript - 方向感知 3D 立方体动画

标签 javascript jquery css animation 3d

我使用这个方向函数构建了一些方向感知的 3D 立方体悬停动画:

var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
    h = obj.offsetHeight,
    x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
    y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
    d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;

return d;};

参见 fiddle : JSFidde

我遇到的问题是无论“输入”动画是否完成,“输出”动画都会开始。

所以我需要一种方法来等待 mousein 动画首先完成,我假设使用动画队列或其他东西。

有什么想法吗?

提前致谢。

最佳答案

也许你可以听

 transitionEnd

事件?

这个 SO 帖子可以规范化

How do I normalize CSS3 Transition functions across browsers?

关于javascript - 方向感知 3D 立方体动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20248574/

相关文章:

javascript - 使用数学优化使用 jQuery 修改 CSS 值的语法

javascript - XMLHttpRequest 是否更新数据 'AUTOMATICALLY' ?

javascript - HTTPS 图像未在 react native 图像中呈现

javascript - 如果满足其他数据条件,则将隐藏复选框设置为 true

javascript - 如何使用jquery选择输入

javascript - 循环触发点击事件

css - 我可以插入背景大小 : cover into the background shorthand?

javascript - 将字符串拆分为两个变量 - 未定义不是一个函数

css - 网站CSS链接重定向

javascript - 键盘的大写锁定键如何锁定文本框的第一个字母?