jQuery 动画 div 到每个 Angular 以跳跃动画和 'fixed' 元素结束

标签 jquery css animation

链接:http://jsfiddle.net/kbJCc/1/

不幸的是,我现在甚至不能用 jquery 执行最简单的动画。 我有一个分成 4 个按钮的二次 div。每个按钮代表我屏幕的一个 Angular 落。因此,如果我按 btn1,我的 quadrativ div 应该动画到左上角。 btn2 应该将 div 动画化到右上角。 btn3 左下角 a.s.o.

现在有两个问题: 1. 动画在 safari 和 chrome 中不流畅(从一个 Angular 跳到另一个 Angular ) 2. 如果我点击了所有(上一个动画之后的一个),div 会卡在左上角。

Firebug 告诉我我的 div 保留了 $.animate() 应用的所有 css 规则?!

希望有人能帮助我。

非常感谢。

顺便说一句。 div 最初应该以我的窗口为中心:)

最佳答案

我已经更新了your jsfiddle .基本上,我为包含 main-menu 的元素提供了静态维度,以便 JavaScript 可以从中计算位置。然后,一旦 DOM 准备就绪,我就通过 JavaScript 将 main-menu 元素初始化为文档的“中心”(从技术上讲,这可以而且应该在样式表中完成)。最后,我更新了您的动画以显式地为 main-menu 元素的所有面设置动画。

关于jQuery 动画 div 到每个 Angular 以跳跃动画和 'fixed' 元素结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4788708/

相关文章:

flutter - 如何在 flutter 中从右到左制作图片动画

php - jquery ui 可选择的复选框

javascript - masonry 网格连续循环滚动

asp.net - jQuery/Javascript - 如何检测图像是否已重新加载

javascript - 使用 waypoints.js 时控制水平滚动

jquery - 非 chrome 浏览器中的动画问题

php - ajax方法发布不起作用

html - CSS - 将一个元素定位在另一个元素周围。彼此漂浮

css - 外部图像与内联 SVG 图像图像加载时间

c# - 按下后退键的动画